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VCzero ， 携 程 无 线 框架 高 级 工程 师 ， 
HTML5 培 训 讲师 ， 主 要 负责 框架 组 件 性 
能 优化 、 新 一 代 框 架 研 发 。2013 ~ 
2015 年 在 高 德 地 图 负责 Node.js 服 务 和 
JavaScript API 相 关 的 研发 。 其 GitHub 地 
址 : https://github.comNVczero。 


要 豆 潍 


携程 框架 研发 部 研发 经 理 ， 负 责 携程 无 
线 前 端 框架 团队 。2011 年 加 入 携程 ， 先 
后 从 事 携程 PC 端 前 端 框 架 、 数 据 可 视 化 
框架 、 无 线 前 端 框 架 等 开发 工作 。 现 负 
责 携 程 无 线 前 端 框架 的 开发 和 性 能 优化 
等 工作 。 


携程 框架 研发 部 高 级 \OS 研 发 工程 师 ， 负 
责 移 动 端 用 户 行为 以 及 性 能 数据 的 统计 
SDK、 数 据 分 析 支 持 。 正 在 修行 ， 朝 着 
全 栈 的 方向 努力 着 。 
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React Native 开发 原生 App。 
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序 二 


When I heard React Native, It was 2014-8 from a Facebook friend who was in the team. They were 
creating this new technology for Facebook App (internal use). He said Facebook plans to open Source this 
technology to App developers. In 2015-3, React Native was released to the public. 


Although the technology have limitations across iOS and Android, its design approach was 
revolutionary. It proves to work close to native App experience (performance) as well as to leverage web 
developers skills. React Native has already impact on App developers now. It becomes a top choice for 


developing new App. 


What Lihua、 Xiaojun and Chengqi surprised me is they were writing this book together in last 6 
months. While they are trying out React Native, they love it. They believe that this technology is useful 
for App development. By creating the book in Chinese, they take React Native to next level of the 


developer reach and make the wide impact on Chinese App Community. 


Their spirit of spreading the new technology and their endeavor of creating the book together as 
team work should highly praised. They Not only master this technology for use by themselves, but also 
show it to Chinese developers. The mobile internet is pushing forward , with many developers in this 
spirit and effort! 


2014 年 8 月 ， 我 从 一 个 在 Facebook 工 作 的 朋友 那里 听 说 了 React Native， 他 们 正在 使 用 这 种 新 
技术 开发 内 部 App。 他 表示 ，Facebook 计 划 将 该 技术 开源 。2015 年 3 月 ，React Native 公 开发 布 了 。 
尽管 这 项 技术 在 兼容 IOS 和 Android 方 面 仍 有 一 定 的 局 限 性 , 但 它 的 设计 理念 别出心裁 。 在 实 
现 媲美 原生 App 的 用 户 体验 (性 能 ) 的 同时 ，React Native 允 许 Web 开 发 者 更 多 地 基于 现 有 经 验 开 
发 App。 现 在 ， 它 已 经 影响 了 很 多 App 开 发 者 ， 在 开发 下 一 个 App 时 ，React Native 将 成 为 开发 人 
员 的 首选 技术 。 
在 过 去 的 6 个 月 中 ， 利 华 、 晓 军 和 诚 福 合力 完成 了 本 书 的 创作 ， 这 让 我 感到 惊喜 。 他 们 在 不 
尝试 React Native， 他 们 热爱 这 项 技术 。 他 们 坚信 , 这 门 技术 对 于 App 开发 者 而 言 十 分 有 帮助 。 
《React Native 入 门 与 实战 》 一 书 的 出 版 , 将 使 更 多 开发 人 员 接 触 到 这 项 技术 ,并 对 国内 App 开发 
者 社区 产生 重要 影响 。 
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2 序 一 


在 创作 本 书 的 过 程 中 , 他 们 的 分 享 精神 和 团队 协作 都 值得 表扬 。 他 们 不 仅 自 己 掌握 了 这 门 技 
术 , 同时 也 将 其 推介 给 了 所 有 国内 的 开发 人 员 。 移动 互联 网 的 发 展 , 无 疑 得 益 于 众多 像 他 们 这 样 
的 开发 人 员 的 努力 贡献 和 分 享 精神 。 


2015-11-20 
Eric Ye， 携 程 旅行 网 CTO 
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友 Es 


随 着 苹果 公司 推出 Phone 和 App Store， 移 动 市 场 开始 持续 升温 ， 各 种 创新 不 断 ， 风 头 逐 渐 盖 
过 Web， 吸 引 了 大 量 开 发 人 员 进 入 移动 领域 。 这 无 疑 使 得 苹果 公司 成 为 最 大 的 赢家 ， 操 控 着 很 多 
公司 的 命运 。 

Facebook 在 Web 技 术 上 非常 成 功 ， 深 知 移动 未 来 的 重要 性 ， 但 又 不 想 受 制 于 苹果 公司 。 于 是 
投入 大 量 的 人 力 和 物力 ， 在 移动 HIMLS 上 攻坚 克 难 ， 虽 取得 了 不 少 进展 ， 但 始终 不 如 意 。2012 
年 9 月 ，Facebook 表 示 :“Betting on HTML5 was a mistake.” 并 全 力 转 型 Native App 开 发 。 令 人 没 
有 想到 的 是 ， 两 年 之 后 Facebook 居 然 推 出 了 React Native foriOS 技 术 ， 让 人 眼前 一 亮 ， 兴 奋 不 已 。 


大 家 都 知道 ， Native App 因 其 性 能 优越 和 功能 强大 而 笑 做 江湖 ， 但 终究 逃 不 出 Apple 的 掌心 ， 
多 版 本 维护 非常 痛苦 。HTML5 虽 然 有 Web 的 优势 , 但 因 WebView 在 移动 设备 的 性 能 和 电力 等 因素 
的 制约 ,性 能 总 被 诉 病 ， 难 成 大 器 。 而 Hybrid App 集 Native App 和 Web 优 点 于 一 体 , 还 可 以 相互 补 
短 , 似乎 应 该 成 为 大 家 的 选择 。 然 而 它 在 成 熟 度 、 标 准 化 等 方面 的 顾虑 , 也 会 是 一 个 不 小 的 问题 。 
React Native 技 术 的 诞生 则 普遍 被 大 家 接受 ， 各 大 公司 纷纷 介入 ， 给 人 很 大 的 想象 空间 。 它 的 底 
层 引 擎 是 JavaScript Core， 调 用 的 是 原生 组 件 而 非 HTML5 组 件 (HTML+CSS+JavaScript 构 建 的 组 
件 )。 运 行 时 ， 可 以 做 到 与 Native App 媲 美的 体验 ， 同 时 因为 JavaScript 代 码 可 以 使 用 后 端 强大 的 
Wetb 方 式 管理 ， 既 可 以 做 到 高 效 开 发 ， 也 可 以 做 到 快速 部 署 和 问题 热 修复 。React Native App 运 行 
在 客户 的 手机 上 ， 而 控制 端 可 以 在 后 端 ， 可 以 充分 发 挥 Web 的 能 力 ， 就 像 一 个 牵线 木偶 ， 任 凭 你 
表演 。 

该 书 不 仅 对 React Native 基 础 知识 讲解 得 很 透彻 ， 同 时 还 辅助 了 不 少 案 例 ， 比 如 第 9 章 的 LBS 
应 用 开发 和 第 10 章 的 OpenAPI 应 用 开发 。 相 信 阅 读本 书后 ， 你 一 定 会 有 所 收获 。 

雄关 漫 道 真如 铁 , 而 今 匹 步 从 涉 越 。 很 高 兴 看 到 携程 框架 团队 同学 在 前 端 框 架 和 React Native 
方面 所 做 出 的 努力 ， 也 希望 读者 进入 React Native 领 域 后 能 够 不 断 丰 富 社区 ， 促进 React Native 技 
术 的 鞍 勃 发 展 。 


吴 其 敏 ， 携 程 旅行 网 框架 研发 部 负责 人 ， 高 级 研发 总 监 
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序 三 


最 近 三 四 年 间 ， 国 内 外 的 前 端 与 全 栈 开发 者 社区 都 在 坚持 不 懈 地 追寻 使 用 JavaScript 与 
HTML 、CSS 技 术 体 系 开发 App 内 场景 的 核心 工程 技术 。 这 种 技术 ， 在 国内 很 多 公司 与 团队 中 ， 
被 通称 为 H5。 这 种 工程 类 的 尝试 最 早出 现在 新 闻 资讯 页 等 强 排版 、 弱 交互 的 产品 场景 中 ， 因 其 
灵活 的 布局 能 力 和 免 发布 的 敏捷 迭代 潜力 而 大 受 欢迎 。 而 后 在 涌现 出 大 批 第 三 方 应 用 市 场 的 浪潮 
中 ， 也 成 为 了 应 用 市 场 展示 App 应 用 详情 的 技术 标 配 。 在 此 过 程 中 ，PhoneGap (后 来 的 Apache 
Cordova ) 等 组 件 的 出 现 满足 了 JavaScript 与 Android/iOS 程 序 之 间 的 通信 需求， 及 时 补 全 了 这 种 工 
程 方 案 在 系统 能 力 上 的 短 板 。 大 家 在 更 大 范围 地 推进 这 种 方案 的 过 程 中 , 却 遇 到 了 一 个 致命 的 问 
题 ， 那 就 是 这 种 技术 在 处 理 无 限 滑动 列表 ( 如 微 博 的 信息 流 ) 时 ， 受 WebView 的 有 影响， 表现 出 了 
极 差 的 点 击 响应 、 内 存 性 能 和 兼容 性 。 社 区 中 有 不 少 有 识 之 士 提 出 了 模板 配置 化 + 原生 泻 染 ， 或 
引入 多 个 WebView 运 行 SPA 以 缓解 内 存 问 题 等 行 之 有 效 的 方案 ， 但 均 因 一 定 程 度 上 牺牲 了 灵活 、 
敏捷 的 方案 优势 , 而 无 法 获得 广泛 采纳 。 这 样 的 缺陷 直接 制约 了 JavaScriptin App 工 程 方案 的 再 扩 
大 。 在 百度 供职 时 ， 我 兽 负 责 主持 Clouda 云 端 一 体 框架 的 研发 工作 ， 可 说 是 在 社区 一 线 全 程 参 与 
了 这 个 演进 过 程 。 

React Native 的 出 现 ， 彻 底 、 整 洁 且 智慧 地 解决 了 这 个 痛 点 ， 且 通过 WebKit 的 引入 完整 保留 
了 JavaScript 语 言 的 完整 逻辑 性 , 通过 原生 的 泻 染 保持 了 “不 沾 手 ”的 顺 滑 体验 和 出 色 的 内 存 管理 ， 
没有 妥协 地 实现 了 大 家 需要 的 JavaScript in App 的 工程 体系 能 力 。 

本 书 的 第 一 作者 利 华 曾 与 我 在 阿里 高 德 共事 ， 当 时 就 表现 出 了 对 社区 技术 发 展 的 很 强 敏 感 
性 。 本 书 的 出 版 ， 距 React Native 宣 布 支持 Android 平 台 仪 月 余 ， 可 以 说 是 React Native 实 战 的 第 一 
手中 文 资料 。 

我 推荐 大 家 阅读 这 本 书 。 在 掩 卷 之 后 ， 你 当 能 执 React Native 于 实际 工程 项 目 中 快速 作战 ， 
甚至 实践 于 “ 云 控 App” 的 高 精 尖 领域 。 届 时 ， 我 也 希望 读者 你 进一步 思考 与 了 解 React Native 
的 设计 与 结构 ， 在 社区 中 贡献 一 份 属 于 你 的 力量 ， 为 这 个 领域 中 更 多 的 同学 引路 。 
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序 四 


从 React Native 诞 生 那 一 天 起 ， 对 于 作为 后 端 出 身 但 一 直 对 前 端 念念不忘 的 我 来 说 ， 就 像 发 
现 了 一 个 埋藏 很 深 叹 待 挖 掘 的 金 矿 一 样 兴 奋 。 

可 以 说 ， 从 16 年 前 第 一 次 接触 DHTML 后 ， 只 有 NodeJS 的 出 现 ， 才 能 第 二 次 让 我 产生 对 前 端 
技术 的 兴奋 感 。 而 这 一 次 ，React Native 的 横 空 出 世 ， 再 次 触及 了 我 快要 冷淡 下 去 的 前 端 兴 奋 感 。 

本 书 作者 魏 晓 军 是 我 在 携程 的 同事 , 也 是 当时 及 现在 携程 技术 团队 中 的 顶尖 前 端 高 手 。 晓 军 
所 领导 的 携程 HS/Hybrid 框 架 团 队 ， 是 整个 携程 移动 优先 战略 得 以 顺利 推进 的 核心 技术 动力 。 

感谢 晓 军 和 他 的 团队 为 前 端 技术 社区 及 广大 前 端 技 术 爱 好 者 推出 这 本 期 待 已 久 的 作品 ， 而 
我 ， 作 为 一 名 仍 对 前 端 技 术 念 念 不 忘 的 开 从 业 人 员 ， 也 会 在 该 书 上 市 后 第 一 时 间 抢 购 回 家 ， 饱 
饱 眼福 。 


张 雪 峰 ， 饿 了 么 CTO， 于 人 饿 了 么 总 部 
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致谢 


因为 我 们 团队 比较 早 关注 了 React Native， 同 时 也 做 了 些 分 享 ， 因 此 有 幸 结识 了 图 灵 公 司 的 


王 军 花 老师 。2015 年 6 


月 24 日 ， 收 到 出 版 社 王 老 师 的 邮件 ,希望 我 们 能 写 一 本 关于 React Native 


的 图 书 , 但 是 因为 React Native 才 刚刚 发 布 不 入 ， 所 以 在 思考 了 一 段 时 间 后 ， 才 下 定 决 心 写作 。 

新 事物 的 发 展 总 是 曲折 的 。React Native 就 像 一 个 新 生 儿 一 样 接受 着 质疑 和 考究 。 我 们 期 待 
它 更 加 完善 、 更 加 稳定 。 在 本 书 的 写作 过 程 中 ， 我 们 一 直 关 注 着 React Native 的 更 新 和 发 展 ， 本 
书 的 内 容 也 随 着 React Native 的 发 展 而 修改 了 多 次 。 


对 于 工程 师 而 言 ， 


程 地 提出 建议 和 修改 ， 


写作 是 一 件 比较 痛苦 的 事 , 我 们 更 加 喜欢 使 用 代码 来 表达 我 们 的 想法 。 很 


多 时 候 ,一句 话 需要 推敲 好 多 次 才能 下 笔 。 其 中 , 初稿 有 很 多 不 完善 的 地 方 ， 都 是 王 老 师 日 夜 莱 


这 里 要 对 王 老 师 表示 深 深 的 感谢 ! 写作 本 书 ， 对 我 们 而 言 ,不 仅 加 深 了 对 


React Native 的 理解 ， 同 时 也 提升 了 个 人 的 写作 水 平 ， 这 要 感谢 人 民 邮 电 出 版 社 图 灵 公司 给 予 的 


机 会 。 
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们 和 学 习 React Native 的 同学 一 起 努力 ， 为 React Native 的 莲 勃 发 展 贡献 自己 的 力量 。 
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ll 


前 


React Native 开 启 了 开发 原生 App 的 新 方式 ， 不 仅 提高 了 开发 效率 ， 同 时 提高 了 App 的 用 户 体 
验 。 相 比 Web App 而 言 ，React Native 可 以 使 用 原生 的 组 件 和 API， 这 样 就 可 以 释放 Native 的 能 
和 体验 ; 相 比 Native 开 发 而 言 ， 前 端 开 发 者 可 以 使 用 JavaScript 开 发 原生 应 用 ， 这 样 开 发 效率 将 会 
得 到 很 大 的 提高 。 


本 书目 的 


目前 , 国内 针对 React Native 讲 解 的 图 书 和 资料 都 很 少 , 阅读 本 书 可 以 帮助 你 更 好 地 开发 React 
Native 应 用 。 或 许 你 已 经 了 解 React Native 的 基本 内 容 , 或 许 你 已 经 开始 了 React Native 的 开发 之 旅 ， 
无 论 如 何 ， 本 书 都 希望 可 以 带领 大 家 拥抱 React Native， 使 用 React Native。 当 然 ， 本 书 也 希望 弥 
补 中 文 资料 在 这 方面 的 欠缺 。 


ST 

内 容 和 组 织 结构 

本 书 的 内 容 是 我 们 在 实践 过 程 中 总 结 得 到 的 ， 一 共 分 为 4 部 分 。 
第 一 部 分 为 基础 语法 篇 ， 共 两 章 内 容 ， 主 要 介绍 了 React Native 的 开发 基础 知识 。 
第 1 章 介 绍 了 React Native 的 环境 搭建 、React 与 React Native 之 间 的 关系 ， 以 及 如 何 学 习 React 
Native。 

第 2 章 主要 介绍 了 React Native 的 开发 基础 知识 ， 包 含 flexbox 布 局 、JSX 语 法 ， 并 且 详 细 介 绍 
了 React Native 创 建 项 目的 过 程 。 

第 二 部 分 为 API 和 组 件 篇 ， 共 4 章 内容 ， 主 要 介绍 了 React Native 的 API、 组 件 以 及 Native 扩 展 
和 组 件 的 封装 。 
第 3 章 介绍 了 React Native 常 用 组 件 ， 包含 View 组 件 、Text 组 件 、NavigatorIOS 组 件 、TextInput 
组 件 、Touchable 类 组 件 ( TouchableHighlight、TouchableOpacity 和 TouchableWithoutFeedback )、 
Image 组 件 、TabBarIOS 组 件 和 WebView 组 件 。 

第 4 章 介 绍 了 React Native 常 用 的 API, 包含 AppRegistry、AsyncStorage、AlertIOS、ActionSheetIOS.、 
PixelRatio 、AppStateIOS 、StatusBarIOS 、NetInfo 、CameraRoll 、VibrationIOS 、Geolocation 、 网 
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络 数据 请 求 的 应 用 以 及 定时 器 和 动画 。 


第 $ 章 介绍 了 React Native 的 实现 原型 
件 为 案例 进行 实战 讲解 。 


以 及 在 原生 组 件 和 API 上 的 扩展 ， 并 且 以 一 个 “图 表 ” 组 


第 6 章 介 绍 了 使 用 JavaScript 封 装 React Native 组 件 ， 主 要 实现 了 二 级 菜单 组 件 、 日历 组 件 以 及 
初步 介绍 了 开源 组 件 的 用 法 。 


第 三 部 分 为 App 更 新 和 上 架 篇 ， 共 一 
第 7 章 介绍 


> 


一 章 内 容 。 
介绍 了 App 的 动态 更 新 和 上 架 过 程 。 
第 四 部 分 为 实 


成 篇 ， 共 3 童 内 容 ， 介 


绍 了 如 何 使 用 React Native 开 发 原生 App。 
第 8 章 介绍 了 使 用 React Native 和 Node.js 开 发 企业 内 部 通讯 录 应 用 一 一 “百灵 岛 ”App。 
第 9 章 介 绍 了 使 用 React Native Geolocation API 和 高 德 地 图 API 开 发 LBS 应 用 一 一 “附近 ”App。 
第 10 童 介绍 了 使 朋 


日 豆 辩 开放 API 开 发 一 款 搜索 App， 主 要 包含 图 书 、 
本 书 特色 介绍 


电影 和 音乐 搜索 。 
本 书 的 特色 主要 在 于 理论 名 
通过 案例 和 实战 深入 学 习 。 


E 论 结合 实战 ， 读 者 不 仅 可 以 了 解 React Native 的 API 和 组 件 ， 同 时 可 以 
源 代码 


本 书包 含 的 代码 及 其 案例 可 以 到 https://github.com/vczero/React-Native-Code 下 载 或 者 到 
社区 本 书 主页 免费 注册 下 载 。 本 书 创作 时 间 较 短 ， 难 免 会 有 蚊 涯 ， 恩 请 各 位 读者 答 正 。 


王 利 华 
2015 年 11 月 于 上 海 凌 空 SOHO 
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第 一 部 分 
基础 语法 局 


口 第 1 章 React Native 简 介 
口 第 2 章 React Native 开 发 基础 
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第 矿 章 
React Native 简 介 


React Native 一 经 Facebook 开 源 , 就 引起 了 业界 的 关注 , 越 来 越 多 的 开发 者 开始 尝试 在 生产 中 
使 用 它 。React Native 为 JavaScript 开 发 跨 终端 应 用 提供 了 更 加 丰富 的 想象 空间 。 下 面 就 开始 我 们 
的 React Native 开 发 之 旅 吧 。 


1.1 环境 搭建 


工 欲 善 其 事 ， 必 先 利 其 器 。 首 先 ， 我 们 需要 搭建 开发 环境 ( 整 本 书 都 是 以 Mac OS X 系 统 为 
基础 的 )。React Native 主 要 依赖 的 环境 如 下 所 示 。 
口 Mac OS X 操 作 系统 。 
D 推荐 使 用 Xcode 6.4 或 者 更 高 版 本 。 
口 安装 Node.js 4.0 或 者 最 新 版 本 。 
口 建议 使 用 Homebrew 安 装 : watchman 和 flow。 


下 面 我 们 一 步 步 来 安装 开发 环境 。 


1.1.1 安装 Node.js 


打开 浏览 器 ， 在 浏览 器 中 输入 地 址 https:/nodejs.org/， 此 时 打开 的 是 Node.js 的 官网 ， 从 中 可 
以 看 到 最 新 的 版 本 以 及 下 载 按钮 。 

这 里 下 载 的 是 node-v4.1.0.pkg。 等 待 下 载 完成 后 , 我 们 开始 安装 Node.js。 双 击 node-v4.1.0.pkg 
文件 ， 将 弹出 如 图 1-1 所 示 的 界面 。 
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1.1 环境 搭建 二 3 


@e@o 请 安装 "Node.js” 吕 


欢迎 使 用 Node.js" 安 装 器 


This package will install Node.js v4.1.0 and npm v2.14.3 
外 介绍 into /usr/local/. 


继续 


图 1-1 Node.js 安 装 启动 界面 


在 图 1-1 中 ,我 们 可 以 看 到 This package will install Node.js v4.1.0 and npm v2.14.3 into /usr/local/ 
这 句 话 ， 这 表明 将 会 安装 Node.js 4.1.0 版 本 和 npm 2.14 版 本 。 


接着 点 击 “ 继 续 ” 按 钮 ,会 看 到 许可 界面 , 青 点 击 “ 继 续 ” 按 钮 ,将 看 到 许可 提示 ， 如 图 1-2 
所 示 。 


SS@C 请 安装 "Node.js” 吕 


若 要 继续 安装 软件 ， 您 必须 同意 软件 许可 协议 中 的 条 款 。 
点 按 "同意 "以 继续 安装 ， 点 按 "不 同意 "以 取消 安装 并 退出 安装 器 。 


阅读 许可 不 同意 同意 


of this Software and assoclated documentation les (the "Softiware to 
deal in the Software without restriction, including without limitation the 


rights to use, copy, modify, merge, publish, distribute, sublicense, and/or 
sell copies of the Software, and to permit persons to whom the Software 
is 

furnished to do so, subject to the following conditions: 


The above copyright notice and this permission notice shall be included in 
all copies or substantial portions of the Software. 


THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF 


ANY KIND, EXPRESS OR 
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 


打印 … 存储 … 返回 继续 


图 1-2 ”Node.js 安 装 许可 


点 击 “ 同 意 ” 按 钮 ， 会 出 现 如 图 1-3 所 示 的 界面 。 
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ea 二 安装 "Nodejs” a 
选择 一 个 目的 宗 类 
9 介绍 您 要 妇 何 安装 此 软件 ? 
许可 
el [了 为 这 台电 脑 上 的 所 有 用 户 安装 
安装 类 型 
安装 
摘要 
| | 命 安 丢 这 个 软件 需 有 要 "38.4 MB" 的 磁盘 空间 。 
您 已 选取 为 这 台电 脑 的 所 有 用 户 安装 此 软件 ， 
返回 继 坪 


图 1-3 ”确认 为 用 户 安装 Nodejs 
这 里 我 们 点 击 “ 继 续 ”按钮 ， 得 到 的 界面 如 图 1-4 所 示 。 


ee 刻 安装 "Node.js” a 
在 “Macintosh HD” 上 进行 标准 安装 
e@ 介绍 这 将 占用 您 的 电脑 上 的 38.4 MB 空间 。 
@ 许可 请 点 按 "安装 "来 为 此 电脑 的 所 有 用 户 执行 此 软件 标准 安装 。 此 电脑 
的 所 有 用 户 均 可 以 使 用 此 软件 。 
目的 宗 卷 
9 安装 类 型 
安装 
摘要 


更 改 安装 位 置 … 


自 定 返回 安装 


图 1-4 选择 安装 目录 


在 图 1-4 中 ， 我 们 不 更 改 安装 位 置 ， 直 接 使 用 默认 值 即 可 。 然 后 点 击 “安装 ”按钮 ， 输 入 你 
的 电脑 的 密码 ( 一般 用 户 都 设置 了 电脑 密码 ), 再 点 击 “ 安 装 软件 ”开始 安装 程序 。 如 图 1-5 所 示 ， 
这 里 显示 了 “安装 成 功 "， 表 示 Node.js 安 装 成 功 ， 此 时 直接 点 击 “ 关 闭 ” 按 钮 即 可 。 
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@ 这 安装 “Node.js” 吕 
安装 成 功 。 


Node.js was installed at 


介绍 _ 

许可 /usr/local/bin/node 

目的 宗 卷 npm was installed at 

安装 类 型 /usr/local/bin/npm 

安装 ee 

摘要 Make sure that /usr/local/bin is in your $PATH. 


图 1-5 安装 成 功 界面 
在 图 1-5 中 ， 我 们 可 以 看 到 如 下 信息 : 


Node.js was installed at 


/usr/local/bin/node 
npm was installed at 
/usr/local/bin/npm 


Make sure that /usr/local/bin is in your $PATH. 


以 上 信息 表明 , Node.js 安 装 在 /usr/local/bin/node 目 录 下 , npm 安 装 nd 目录 下 。 
我 们 可 以 通过 Mac 终 端 命令 切换 到 /usr/local/bin/ 目 录 下 ， 从 中 可 以 看 到 安装 的 Node.js 和 npm， 如 图 
1-6 所 示 。 上 述 信 息 同 时 告诉 我 们 , 要 确保 /usr/local/bin 在 我 们 的 环境 变量 %PATH 中 , 一 般 默认 都 在 。 


cd /usr/local/bin/ 
ls 


lihua@lihuadeair node 
> console.log( "hello world' ); 
hello world 


图 1-6 ”Node.js 和 npm 安 装 上 日 录 
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此 时 ， 我 们 在 终端 中 输入 命令 node -v， 就 可 以 看 到 刚才 安装 的 Node.js 的 版 本 ( 即 v4.1.0 )， 
表示 Node.js 安 装 成 功 ， 如 图 1-7 所 示 。 现 在 我 们 就 可 以 在 终端 中 写 些 简单 的 程序 了 。 需 要 说 明 的 
是 ， 这 里 我 们 就 不 介绍 Node.js 了 ， 读 者 可 自行 查阅 相关 资料 。 


lihua@lihuadeair node ~V 


@11 node 
> console.log( 'Hello React Native!'); 
Hello React Native! 


> console.log(' 开 始 学 习 React Native' ); 
开始 学 习 React Native 


> 上 


图 1-7 Node.js 


1.1.2 ”安装 React Native 

Nodejjs 安装 完成 后 ， 可 以 使 用 它 干 很 多 事情 。 但 是 ， 本 书 的 主题 是 React Native， 所 以 我 们 
要 继续 搭建 React Native 的 开发 环境 。 

在 正式 安装 React Native 之 前 ， 需 要 确保 以 下 环境 是 可 用 的 。 


口 Nodejs 已 经 安装 上 且 在 环境 变量 中 。 如 果 没 有 安装 ， 可 以 参考 1.1.1 节 。 
口 Xcode 已 经 安装 上 且 版 本 最 好 是 6.4 以 上 版 本 。Xcode 的 安装 这 里 就 不 做 介绍 了 。 
口 推荐 安装 Homebrew， 同 时 通过 Homebrew 安 装 watchman 和 flow。 


通过 Homebrew 安 装 watchman 和 flow 的 命令 如 下 : 


$ brew install watchman 
$ brew install flow 


现在 万 事 具 备 ， 只 欠 东 风 。 我 们 通过 npm 安 装 react-native-cli 的 命名 行 工 具 。 在 Mac 终 端 中 输 
人 如 下 命令 ， 其 中 -g 表 示 全 局 安装 : 


$ npm install -g react-native-cli 


如 果 在 安装 过 程 中 发 现 需要 管理 员 权 限 ， 可 以 给 命令 添加 sudo， 然 后 输入 管理 员 密 码 即 可 : 


$ sudo npm install -8g react-native-cli 


安装 成 功 后 ， 看 到 的 界面 如 图 1-8 所 示 。 


lihua@lihuadeair Sudo cnpm install ~g react-native-cCli 


Password: 
/usr/local/bin/react-native ~> /usr/local/lib/node modules/react-native-cli/inde 


x.js 
react-native-cli@0.1.4 /usr/local/lib/node modules/react-native-cli 
-一 Prompte0.2.14 LP .a 


utile@0.2.1) 


图 1-8 ”安装 react-native-cli 


如 果 安 装 耗 时 较 长 ， 可 以 采用 淘宝 镜像 安装 ， 即 如 图 1-8 所 示 的 cnpm。 
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1.1.3 ”使 用 NVM 管理 Node.js 版 本 
因为 需要 经 常 切换 Node.js 版 本 , 所 以 建议 使 用 NVM( Node.js Version Manager ) 来 管理 Node.js 
版 本 。NVM 在 GitHub 上 的 地 址 是 https://github.com/cnpm/mvm ( 这 里 使 用 cnpm 的 NVM )。 
首先 ， 我们 使 用 git 命 令 将 代码 克隆 下 来 。 例 如 ， 在 命令 行 中 输入 git clone 命 令 : 
$ git clone https://github.com/creationix/nvm 
为 了 临时 使 用 nvm 命 令 ( 只 针对 当前 bash )， 在 终端 中 输入 如 下 命令 : 


$ cd nvm (新 版 没有 该 目录 ) 

$ source nvm.sh 

这 样 我 们 就 可 以 用 nvm 对 Node.js 和 io.js 进 行 版 本 管理 了 。 在 终端 中 输入 nvm 命 令 , 可 以 看 到 命 
令 帮 助 : 
Er Ee 


$ nvm 
Node Version Manager 
Usage: 
nvm help Show this message 
nvm --version Print out the latest released version of nvm 
nvm install [-s] <version> Download and install a <version>, [-s] from source. Uses . 
nvmrc if available 
nvm uninstall <version> Uninstall a version 
nvm Use <version> odify PATH to use <version>. Uses .nvmrc if available 
nvm run <version> [<args>] Run <version> with <args> as arguments. Uses .nvmrc if 
available for <version> 
nvm current Display currently activated version 
nvm ls List installed versions 
nvm ls <version> List versions matching a given description 
nvm ls-remote List remote versions available for install 
nvm deactivate Undo effects of 'nvm' on current shell 
nvm alias [<pattern>] Show all aliases beginning with <pattern> 
nvm alias <name> <version> Set an alias named <name> pointing to <version> 
nvm unalias <name> Deletes the alias named <name> 
nvm reinstall-packages <version> Reinstall global 'npm' packages contained in <version> to 
current version 
nvm unload Unload 'nvm' from shell 
nvm which [<version>] Display path to installed node version. Uses .nvmrc if 
available 
Example: 
nvm install vO.10.32 Install a specific version number 
nvm use 0.10 Use the latest available 0.10.x release 
nvm run 0.10.32 app.js Run app.js using node vO.10.32 
nvm exec 0.10.32 node app.js Run 'node app.js' with the PATH pointing to node v0.10.32 
nvm alias default 0.10.32 Set default node version on a shell 
Note: 


to remove, delete, or uninstall nvm - just remove ~/.nvm, ~/.npm, and ~/.bower folders 
我 们 使 用 nvm 命 令 来 查看 远程 Node.js 版 本 有 哪些 : 


$ nvm ls-remote 
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同时 可 以 使 用 nvm 1s 命 令 查看 当前 本 机 已 经 安装 的 所 有 Node.js 的 版 本 ， 如 图 1-9 所 示 。 


lihua@lihuadeair 


default js-v2 (~-> iojs-v2.5.0) 
stable -> 0.12 (-> v0.12.5) (default) 
unstable -> 0.11 (~-> v0.11.5) (default) 
lihua@lihuadeair iojs ~v 

V2.5.0 

lihua@lihuadeair node ~V 

v2.5.0 


图 1-9 ”查看 当前 本 机 已 经 安装 的 所 有 Node.js 的 版 本 


1.1.4 创建 项 目 


搭建 好 React Native 环 境 后 ， 现 在 来 创建 项 目 Hello。 在 命令 行 中 使 用 react-native init 命 令 : 


$ react-native init Hello 
This will walk you through creating a new React Native project in /Users/lihua/work/Hello 


> bufferutil@1.2.1 install /Users/lihua/work/Hello/node modules/react-native/node modules/ws/node_ 
modules/bufferutil 
> node-gyp rebuild 


CXX(target) Release/obj.target/bufferutil/src/bufferutil.o 
SOLINK MODULE(target) Release/bufferutil.node 


> 这 里 省 略 了 安装 过 程 的 信息 


To run your app on i0S: 
Open /Users/lihua/work/Hello/ios/Hello.xcodeproj in Xcode 
Hit Run button 

To run your app on Android: 
Have an Android emulator running, or a device connected 
cd /Users/lihua/work/Hello 
react-native run-android 


到 目前 为 止 ， 我 们 已 经 创建 好 了 项 目 ， 可 以 看 到 Open /Users/xxx/Hello/ios/Hello.xcodeproj in 


Xcode ， 这 提示 我 们 使 用 Xcode 打开 项 目 。 


的 文件 是 Xcode 的 项 目 文件 。 使 用 快捷 键 cmd ( % ) +R 局 动 项 目 ， 这 时 可 以 看 到 启动 了 一 个 终端 


进入 刚才 创建 的 Hello 项 目 ， 点 击 Hello.xcodeproj 打 开 该 项 目 。 需 要 注意 的 是 ，xcodeproj 类 型 


React Packager 和 一 个 模拟 器 。 如 果 想 了 解 React Packager， 可 以 翻阅 到 2.3 节 查看 。 


项 目 启 动 完 成 后 ， 就 可 以 看 到 模拟 器 上 显示 了 Welcome to React Native!， 这 说 明 项 目 运 行 成 


功 ， 如 图 1-10 所 示 。 
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iOS Simulator - iPhone 5s - iPhone 5s / iOS 8.... 
Carrier 倒 8:33 PM mw 


Welcome to React Native! 


To get started, edit index.ios.js 
Press Cmd+R to reload, 
Cmd+D or shake for dev menu 


图 1-10 Hello World 


我 们 使 用 Sublime Text 打 开 index.ios.js 文 件 ， 将 Welcome to React Native! 修 改 为 “开始 React 
Native 编 程 之 旅 ” ， 此 时 再 使 用 cmd ( % ) +R 快 捷 键 刷 新 模拟 器 ， 会 立即 显示 “开始 React Native 编 
程 之 旅 ” 的 字样 。 这 说 明 ， 修 改 JavaScript 文 件 起 作用 了 。 


1.2 从 React 到 React Native 


React Native 是 基于 React 设 计 的 ， 因 此 ， 了 解 React 有 助 于 我 们 开发 React Native 应 用 。 


1.2.1 React 简介 


React 的 GitHub 地 址 是 https://github.com/facebook/react。 截 至 2015 年 7 月 26 日 下 午 3 点 ，React 
已 经 获得 25451 个 star、3733 个 fork， 以 及 数 百 个 issues 和 pull requests。 这 说 明 React 受 到 了 很 大 的 
重视 ， 尤 其 是 前 端 工程 师 。React 的 官方 地 址 是 : http://facebook.github.io/react/。 


目前 ，React 的 最 新 版 本 是 React v0.14.0， 其 官方 的 介绍 是 A JAVASCRIPT LIBRARY FOR. 
BUILDING USER INTERFACES。 可 以 看 到 ，React 提 出 的 是 一 个 新 的 开发 模式 和 理念 , 它 强调 的 
是 “用 户 界 面 "。 因 此 ， 很 多 开发 者 将 React 同 Angular、Ember 、Backbone 等 前 端 框架 进行 比较 是 
不 太 合理 的 。 

毕竟 ， 大 家 思考 的 出 发 点 就 不 一 致 ，React 和 希望 将 功能 分 解 化 ， 证 开发 变 得 像 搭 积木 一 样 ， 
快速 上 且 可 维护 。 还 有 开发 者 开 了 个 玩笑 ， 说 React 抛 弃 了 View ( 视图) 和 Controller (控制 器 ) 的 
分 离 实 践 ， 一 夜 回 到 了 “解放 前 ”。 这 说 明 ， 有 很 多 开发 者 对 React 还 是 存在 一 定 疑 虑 和 思考 的 。 
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接受 一 个 新 事物 需要 一 定 的 时 间 , 同样 接受 一 个 新 的 开发 模式 , 并 且 该 开发 模式 丢弃 了 一 些 既 有 
的 经 验 ， 需 要 一 定 的 勇气 和 踩 坑 的 精神 。 


React 主 要 有 如 下 3 个 特点 。 


口 作为 UI〈Just the U1): React 可 以 只 作为 视图 (View ) 在 MVC 中 使 用 。 并 且 在 已 有 项 目 

中 ， 很 容易 使 用 React 开 发 新 功能 。 

口 虚拟 DOM (Virtual DOM) : 这 是 React 的 一 个 亮点 ， 可 以 很 好 地 优化 视图 的 泻 染 和 刷新 。 
当然 , 它 也 可 以 在 Node.js 服 务 器 端 和 React Native 中 使 用 。 虚拟 DOM 是 React 最 重要 的 一 个 
特性 。 以 前 ,我 们 更 新 视图 时 ， 需 要 先 清空 DOM 容 器 中 的 内 容 ， 然 后 将 最 新 的 DOM 和 数 
据 追 加 到 容器 中 ， 现 在 React 将 这 一 操作 放 进 了 内 存 。React 认 为 内 存 的 操作 远 比 视图 全 部 
更 新 来 得 高 效 。 随 着 浏览 器 的 迭代 ， 事 实情 况 更 是 如 此 ， 内 存 相 比 视图 刷新 要 廉价 得 多 。 
React 将 视图 变化 放 进 内 存 进行 比较 ( 就 是 虚拟 DOM 的 比较 )， 计 算出 最 小 更 新 的 视图 ， 
然后 将 该 差异 部 分 进行 更 新 以 完成 整个 组 件 的 泻 染 。 这 就 是 React 如 此 高 效 的 原因 。 

口 数据 流 (Data Flow) : React 实 现 了 单 向 的 数据 流 , 并 且 相 对 于 传统 的 数据 绑 定 而 言 , React 
更 加 灵活 、 便 捷 。 

现在 我 们 对 React 已 经 有 了 初步 的 了 解 ， 那么 ， 学 习 React 需 要 掌握 哪些 知识 呢 ? 

口 JSX 语 法 知识 : JSX 的 官方 解释 是 其 语法 类 似 于 XML ( an XML-like syntax )， 这 也 是 前 端 

工程 师 更 容易 理解 JSX 的 原因 。 因 为 HTML 是 XML 的 子 集 , 前 端 工程 师 对 HTML 更 为 熟悉 。 

口 ES6 相 关 知 识 : 因为 ES6 增 加 了 很 多 语法 特性 和 新 功能 ， 可 以 使 用 ES6 更 加 快速 地 进行 功 


能 开发 。 
口 前 端 基础 知识 : 当然 ， 最 为 基础 的 是 需要 具备 基本 的 前 端 知识 ， 其 中 CSS 以 及 JavaScript 
比较 重要 。 


现在 ， 我 们 举 3 个 简单 的 例子 来 说 明 React 的 用 法 。 关 于 IDE， 可 以 使 用 WebStorm ， 因 为 
WebStorm 拥 有 比较 丰富 的 插件 。 


1. 简单 组 件 和 数据 传递 
我 们 可 以 使 用 this.props 来 做 简单 的 数据 传递 ， 具 体 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head lang="en"> 
<meta charset="UTF-8"> 
<title>React 第 一 个 例子 </title> 
<script type="text/javascript" src="react.js"></script> 
<script type="text/javascript" src="JSXTransformer.js"></script> 
</head> 
<body> 
<div id="example"></div> 
<script type="text/jsx"> 
var HelloMessage = React.createClass({ 
render: function() { 
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return <h1>Hello {this.props.name}l</h1>; 
} 
}); 
React.render(<HelloMessage name="React" />, document.getElementById('example')); 
</script> 
</body> 
</html> 


我 们 从 http://facebook.github.io/react/downloads.html 上 下 载 react.js 和 JSXTransformer.js 这 两 个 
文件 ， 其 中 react.js 是 React 的 核心 文件 ，JSXTransformer.js 是 将 JSX 转 译 成 JavaScript 和 HTML 的 工 
具 。 在 上 面 的 例子 中 ， 我 们 使 用 的 是 JSXTransformer.js 直 接 引 和 人 入， 这样 的 话 ， 就 可 以 在 运行 时 解 
析 转 换 JSX。 当 然 , 在 生产 环境 中 , 我 们 可 以 将 JSXTransformerjs 所 做 的 工作 转 到 线 下 ,做 个 预 编 
译 。 例 如 ， 可 以 使 用 Node.js 做 预 编译 ， 可 以 安装 react-tools 工 具 : 


$ npm install -g react-tools 

这 样 ， 代 码 经 过 了 预 编译 、 压 缩 和 合并 后 ， 会 提高 网 络 的 加 载 速 度 ， 减 少 流量 宽带 的 浪费 ， 
优化 了 用 户 体验 。 

现在 ， 我 们 分 析 上 面 的 代码 ， 它 主要 做 了 两 件 事 。 
口 定义 了 一 个 组 件 HelloMessage。 HelloMessage 可 以 传人 name 属 性 , 同 可 以 将 内 容 用 hi 标签 泻 染 。 
口 使 用 React.render 方 法 将 组 件 泻 染 到 id 为 example 的 div 内 。render 方 法 有 两 个 参数 ， 第 一 

个 参数 就 是 要 泻 染 的 组 件 内 容 ， 第 二 个 就 是 要 泻 染 到 的 目标 节点 。 

此 时 打开 浏览 器 ， 可 以 看 到 效果 : Hello React!。 我 们 打开 Chrome console 工 具 ， 看 到 演 梁 后 

的 文档 内 容 如 图 1-11 所 示 。 


v<html> 
P<head lang="en">..</head> 
v<body> 
v<div id="example"> 
Y<hl data-reactid=".0"> 
<span data-reactid=".0.0">Hello </span> 
<span data-reactid=".0.1">React</span> 
<span data-reactid=".0.2">!</span> 
</hl> 
</div> 
p<script type="text/jsx">..</script> 
</body> 
</html> 


图 1-11 React 演 染 DOM 
可 以 看 到 ，React 将 文本 使 用 span 包 于 ,然后 髋 入 了 id 为 example 的 div。 
2. 通过 this.state 更 新 视图 
通过 改变 this.state 来 更 新 视图 ， 具 体 代码 如 下 : 


<script type="text/jsx"> 
var Timer = React.createClass({ 
/* 初 始 状 态 */ 
getInitialState: function() { 
return {secondsElapsed: 0}; 


}, 
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tick: function() { 
this.setState({secondsElapsed: this.state.secondsElapsed + 1}); 


}, 
/* 组 件 完成 装载 */ 
componentDidMount: function() { 
this.interval = setInterval(this.tick, 1000); 


/* 组 件 将 被 卸载 */ 
componentWillUnmount: function() { 
clearInterval(this.interval); 


外 
render: function() { 
return ( 
<div>Seconds Elapsed: {this.state.secondsElapsed}</div> 


); 
D; 


React.render(<Timer />, document.getElementById('example')); 
</script> 


这 里 我 们 省 略 了 HTML 的 内 容 ， 可 以 参考 第 一 个 例子 。 上 面 的 代码 只 做 了 一 件 事 : 更 改组 件 
的 状态 this. state。 


在 浏览 器 中 运行 效果 ,可 以 发 现 每 隔 一 秒 ，secondsElapsed 增 加 1。 现在 , 我 们 来 看 看 上 面 的 
代码 。 我 们 通过 React .createClass 创 建 了 一 个 组 件 。 


其 实 , 这 里 已 经 涉及 一 个 组 件 的 生命 周期 了 。getInitialstate 是 组 件 的 初始 状态 , 必须 返回 
一 个 对 象 或 者 null 对 象 。 在 getInitialstate 中 ， 我们 可 以 准备 组 件 需 要 的 数据 以 及 后 期 需要 更 新 
的 数据 模型 ， 也 就 是 说 getInitialState 返 回 的 对 象 是 挂 载 在 this.state 上 的 。render 方 法 的 作用 
是 演 染 视图 。 这 里 render 使 用 的 数据 是 this.state， 这 样 我 们 可 以 通过 更 新 this.state 来 更 新 视 
图 。componentDidMount 是 组 件 加 载 完 成 的 状态 ， 这 里 我 们 可 以 改变 组 件 的 状态 (this. state )。 


在 上 面 的 代码 中 ，componentDidMount 设 置 了 interval， 每 隔 一 秒 钟 ，secondsEl1apsed 加 1 。 
componentWillUnmount 在 组 件 将 被 抒 载 时 调用 。 我 们 可 以 在 componentwillUnmount 里 清除 定时 兢 


this.interval。 
3. 简单 应 用 
示例 代码 如 下 : 


Var ShowEditor = React.createClass({ 
getInitialState: function() { 
return {value: ' 你 可 以 在 这 里 输入 文字 '}); 
}), 
handleChange: function() { 
this.setState({value: React.findDOMNode(this.refs.textarea).value}); 
}, 
render: function() { 
return ( 
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<div> 
<h3> 输 入 </h3> 
<textarea style={{width:300, height:150, outline:'none'}} 
onChange={this.handleChange} 
ref="textarea" 
defaultValue={this. state.value} /> 


<h3> 输 出 </h3> 
<div> 
{this.state.value} 
</div> 
</div> 
); 
} 
D); 


React.render(<ShowEditor />, document.getElementById('example')); 
上 面 的 代码 在 浏览 器 中 的 运行 效果 如 图 1-12 所 示 。 
输入 


欢迎 来 到 React 的 世界 ! 


输出 
欢迎 来 到 React 的 世界 ! 


图 1-12 ”React 演 示 效 果 
现在 我 们 来 分 析 下 上 面 的 代码 。ShowEditor 做 了 一 件 事 : 用 户 在 textarea 输 入 文字 的 同时 ， 
会 在 div 中 及 时 输出 textarea 中 的 文字 。 
这 里 有 4 个 地 方 需要 我 们 关注 下 。 
口 可 以 通过 state 来 修改 视图 的 状态 从 而 改变 视图 。 
口 textarea 上 绑 定 了 onChange 的 事件 监听 ， 甚 目的 是 通过 setState 改 变 this.state.value。 


口 textarea 添 加 了 ref 属 性 ， 这 样 我 们 就 可 以 通过 this.refs.textarea 引 用 textarea 对 象 了 。 
口 React 提 供 findDOMNode 的 方法 ， 通 过 它 可 以 找到 React 的 DOM。 


通过 上 面 这 3 个 简单 的 例子 ， 我 们 对 React 有 了 初步 的 认识 。 


1.2.2 ”React Native 简介 


前 面 我 们 介绍 了 React 的 一 些 特性 ， 展 示 了 几 个 简单 的 例子 。 其 实 React 与 React Native 具 有 非 
常 密切 的 关系 ， 现 在 就 来 介绍 下 React 在 Native 上 的 应 用 React Native。React Native 在 GitHub 
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上 地 址 是 : https://github.com/facebook/react-native。 


截至 2015 年 11 月 24 日 下 午 1 点 ,ReactNative 已 经 获得 了 22839 个 star 和 3644 个 fork, 这 说 明 React 
Native 十 分 受 大 家 关注 。 目 前 (2015 年 11 月 )，React Native 的 最 新 版 本 是 v0.15.0， 我 们 可 以 到 
https://github.com/facebook/react-native/releases 关 注 最 新 版 本 的 发 布 情况 。 


React Native 的 官网 地 址 是 https://facebook.github.io/react-native/， 其 官网 的 介绍 是 使 用 React 
构建 Native 应 用 的 框架 ( A FRAMEWORK FOR BUILDING NATIVE APPS USING REACT )。 


这 说 明 ，React Native 采 用 的 语法 也 是 React。React Native 的 目标 是 高 效 跨 平台 地 开发 Native 
应 用 ， 同时， 也 强调 了 “一 次 学 习 ， 多 个 平台 编写 代码 ”。 也 就 是 说 ，React Native 不 是 “一 次 编 
人 码 ， 多 处 运行 "。 如 图 1-13 所 示 ， 我们 可 以 清楚 地 看 到 React Native 是 构建 在 React 和 JSX 基 础 上 的 。 
因此 ， 只 要 基本 和 掌握 了 React 和 JSX， 同 时 补充 相关 平台 (iOS、Android、Web ) 的 知识 ， 就 能 
发 Native 应 用 和 Web 应 用 。 


Virtual DOM | 


| 


React & JSX | 


SS 


图 1-13 ”React Native 设 计 思 路 


现在 ,我 们 来 看 一 个 简单 的 例子 。 在 1.1.2 节 中 ,我 们 已 经 知道 如 何 创建 一 个 项 目 ， 这 里 创建 
一 个 名 为 demo 的 React Native 项 目 。 


$ react-native init demo 


然后 使 用 Xcode 打开 该 项 目 ， 按 照 如 下 代码 修改 index.ios.js 文 件 : 


"Use strict'; 


var React = require('react-native'); 
var { 

AppRegistry, 

StyleSheet, 

Text， 

View, 

Image, 
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: | ee Eo 


var demo = React.createClass({ 
render: function() { 
return ( 

<View style={styles.container}> 
<Text style={styles.welcome}> 欢 迎 来 到 React Native 的 世界 </Text> 
<Image style={{width:50,height:50, resizeMode: Image.resizeMode.contain}} 

source={{uri:'https://facebook.github.io/react-native/img/header logo.png'}}> 

</Image> 

</View> 


好 
} 
}); 


var styles = StyleSheet.create({ 
container: { 
flex: 1， 
justifyContent: 'center', 
alignItems: 'center', 
backgroundColor: '#05A5D1', 
}， 
welcome: { 
fontSize: 20, 
color: '#fff" 
}， 
]); 


AppRegistry.registerComponent('demo', () => demo); 


接着 在 Xcode 中 启动 项 目 (快捷 键 : cmd (# ) +R )， 运 行 效果 如 图 1-14 所 示 。 


iOS Simulator - iPhone 5s - iPhone 5s / iOS 8.… 


欢迎 来 到 React Native 的 世界 


图 1-14 React Native 演 示 效 果 
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下 面 我 们 来 分 析 上 面 的 代码 。 使 用 require 引 入 react-native 模 块 ， 然 后 定义 了 AppRegistry、 
StyleSheet 、Text、View 和 Image 这 5 个 对 象 。 这 5 个 对 象 其 实 是 React Native 的 3 个 组 件 ( Text、View 
和 Image ) 和 2 个 API ( AppRegistry 和 StyleSheet )。 如 果 想 了 解 更 多 的 组 件 和 API， 可 以 翻阅 到 第 3 
章 和 第 4 章 。 

其 实 ， 上 面 的 va 形式 的 对 象 也 可 以 这 样 定 义 : 


//var { 

// AppRegistry, 
// StyleSheet, 
// Text, 

// View, 

// Image, 

//} = React; 


var AppRegistry = React.AppRegistry; 
Var StyleSheet = React.StyleSheet; 
var Text = React.Text; 

var View = React.View; 

var Image = React.1mage; 


可 以 看 出 ,使 用 var {} = React 的 形式 更 为 简洁 。 

然后 使 用 React .createClass 创 建 了 一 个 组 件 ， 其 中 render 是 视图 泻 染 的 方法 , 泻 染 的 内 容 是 
一 行文 本 “欢迎 来 到 React Native 的 世界 ”和 一 个 图 片 ( React Native Logo )。StyleSheet.create 
创建 的 是 一 个 样式 表 的 类 ， 里 面包 含 container 和 welcome 这 两 个 样式 对 象 。 同 时 ， 我 们 也 看 到 组 
件 上 的 style 属 性 包含 了 一 个 对 象 ， 即 style={ 对 象 } 的 形式 。 这 里 需要 说 明 的 是 , 样式 书写 与 CSS 
不 一 样 ， 我 们 需要 使 用 驼峰 命名 规则 。 关 于 React Native 的 样式 、 布 局 及 语法 ， 我 们 将 在 第 2 章 中 
详细 介绍 。 

图 1-15 展 示 了 React Native 的 开发 流程 。 首 先 , 我 们 需要 根据 业务 来 划分 组 件 。 这 时 候 , 组 件 
的 颗粒 度 需要 根据 业务 分 工 和 开发 难度 来 划分 , 否则 , 后 期 的 维护 成 本 就 会 相对 较 高 。 我 们 希望 ， 
根据 不 同 的 功能 开发 不 同 的 入 口 组 件 ， 这样 的 话 ， 每 一 个 功能 或 者 功能 集合 就 能 独立 出 来 ,功能 
的 移植 性 好 。 关 于 组 件 的 功能 开发 , 我 们 将 在 第 3 章 和 第 6 章 中 详细 介绍 , 第 8 章 和 第 9 章 都 会 以 实 
战 的 形式 展示 。 最 后 , 为 了 更 新 和 发 布 应 用 ,我们 需要 设计 和 开发 一 套 符合 业务 需求 的 打包 更 新 
机 制 。 关 于 打包 和 热 更 新 ， 我 们 将 在 第 7 章 中 介绍 。 
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设计 阶段 开发 阶段 打包 更 新 机 制 


1-15 ”React Native 开 发 流程 


1.3 为 什么 要 使 用 React Native 


首先 , 我 们 来 回答 为 什么 会 出 现 React Native? 这 是 因为 移动 设备 的 环境 要 比 Web 环 境 复杂 得 
多 ， 也 就 导致 了 Native 开 发 的 成 本 要 高 。 随 着 前 端的 发 展 ， 已 经 拥有 了 大 量 的 前 端 从 业 人 员 ， 但 
是 移动 端 开 发 人 员 相 对 较 少 。 一 些 公司 为 了 寻求 App 开 发 效率 、 成 本 、 体 验 之 间 的 平衡 ， 从 而 选 
择 了 Hybird App 的 开发 方案 。 这 样 做 的 一 个 好 处 就 是 ， 既 能 拥有 高 效 的 开发 效率 和 较 多 的 开发 人 
员 ， 又 能 快速 更 新 App。 但 是 ， 这 只 是 一 种 平 衔 方案 。 更 多 的 时 候 ， 在 资源 较为 丰富 的 情况 下 ， 
更 倾向 于 把 体验 做 好 。 然 而 ， 在 WebView 中 个 和 人 HTML 页 面 存 在 一 些 性 能 和 体验 上 的 弱势 。 这 也 
为 技术 发 展 提出 了 一 个 新 的 挑战 .如 何 将 开发 成 本 和 用 户 体验 做 到 更 好 的 平衡 ? 

因此 ，Facebook 提 出 了 React Native 的 解决 方案 。 也 正 是 因为 React Native 的 跨 平 台 解 决 的 特 
性 和 使 用 JavaScript 作 为 开发 语言 而 赢得 了 众多 开发 者 的 关注 。 很 多 时 候 , 前 端 都 有 一 种 乐观 的 想 
法 : HIML5 可 以 替代 原生 应 用 。 但 是 ， 实 际 上 ，HTMLS 应 用 在 用 户 体验 和 性 能 上 比 原生 应 用 弱 
一 些 。 这 就 是 React Native 的 切入 点 。React Native 不 仅 可 以 使 用 前 端 开 发 的 模式 来 开发 应 用 ， 还 
能 调用 原生 应 用 的 UI 组 件 和 API。 所 以 说 ，React Native 兼 顾 了 开发 效率 ， 提 高 了 用 户 体验 。 这 也 
为 前 端 开发 者 进入 原生 开发 领域 降低 了 门槛 。 


1.4 如 何 学 习 React Native 


目前 ，React Native 更 新 的 速度 较 快 ， 文 档 方面 还 不 是 很 全 。 如 果 开 发 一 款 小 型 的 App， 掌 握 
React Native 的 组 件 和 API 就 已 经 足够 了 ,如 果 学 习 和 实践 中 遇 到 问题 , 可 以 到 React Native GitHub 
issues 上 搜索 ， 其 中 有 很 多 解决 方法 。 下 面 是 关于 React Native 的 4 个 比较 重要 的 地 址 。 


口 React Native 官 方 网 站 : http://facebook.github.io/react-native/。 

口 React Native 版 本 发 布 : https://github.com/facebook/react-native/releases。 
口 React Native GitHub 地 址 : https://github.com/facebook/react-native。 

口 疑难 问题 搜索 : https://github.com/facebook/react-native/issues。 
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1.5 说明 


因为 React Native Android 版 本 还 不 稳定 ， 本 书 所 有 实例 都 是 基于 iOS 开 发 的 。Android 环 境 搭 
建 可 以 参考 : http://facebook.github.io/react-native/docs/android-setup.html。 此 外 ， 因 为 React Native 
是 跨 平台 的 ， 在 iOS 和 Android 平 台 上 只 是 一 些 组 件 和 API 存 在 差异 ， 所 以 学 习 了 React Native iOS 
开发 后 ， 开 发 React Native Android 也 是 比较 容易 的 事 。 但 是 ,需要 我 们 针对 iOS 和 Android 平 台 学 
习 一 些 基础 知识 。 
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React Native 开 友基 侧 


经 过 上 一 章 的 学 习 , 大 家 对 React Native 都 有 了 一 定 的 认识 。 光 认识 还 不 够 , 我 们 还 需 为 React 
Native 应 用 的 开发 打下 扎实 的 基础 。 本 章 中 , 我们 主要 介绍 React Naitve 应 用 开发 中 用 到 的 最 基础 
的 内 容 ， 包 括 处 理 页 面 布局 的 flexbox、 人 处 理 页 面 结构 的 JSX 以 及 React Native 的 开发 向 导 。 


2.1 flexbox 布局 


flexbox 是 React Native 应 用 开发 中 必 不 可 少 的 内 容 , 也 是 最 常用 的 内 容 。 下 面 我 们 将 对 flexbox 
的 基础 知识 以 及 在 React Native 应 用 中 的 实战 进行 详细 的 介绍 。 


做 过 Web 开 发 的 人 员 都 清楚 ,传统 的 页 面 布局 基于 盒子 模型 ,依赖 定位 属性 、 流 动 属性 和 显 
示 属 性 来 解决 。 对 于 一 些 伸缩 性 的 布局 , 处理 起 来 很 是 麻烦 ， 于 是 在 2009 年 ， 由 W3C 组 织 提 出 来 
一 种 新 的 布局 方案 , 即 flexbox 布 局 。 该 布局 可 以 简单 快速 地 完成 各 种 伸缩 性 的 设计 。 那 么 , flexbox 
是 什么 呢 ? flexbox 是 Flexible Box 的 缩写 ， 即 为 弹性 盒子 布局 ， 可 以 为 传统 的 盒子 模型 布局 带 来 
更 大 的 灵活 性 。 关 于 该 布局 ，W3C 的 最 近 更 新 时 间 是 2015 年 5 月 14 日 。 在 http:/caniuse.com/ 中 显 
示 ， 该 布局 对 浏览 器 的 支持 情况 如 图 2-1 所 示 ， 从 中 可 以 看 出 ， 目 前 主流 的 浏览 器 都 已 支持 它 。 
如 果 只 考虑 移动 端 开发 的 同学 们 ， 就 可 以 随意 使 用 它 了 。 


. 
Android 


2-1 浏览 器 对 flexbox 布 局 的 支持 情况 
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说 明 图 中 红色 表示 不 支持 ,黄色 表示 支持 部 分 功能 ， 绿 色 表 示 完 全 支持 ， 右 上 角 带 有 “一 
标记 的 ， 表 示 需 要 加 浏览 器 前 级 。 
由 于 本 书 为 黑白 印刷 ， 所 以 这 里 详细 说 明 下 哪些 版 本 归属 于 哪 种 颜色 。 


口 红色 : IE8 和 IE9。 
口 黄色 : IE10、Android Browser 4.1 、Android Browser 4.3。 
口 绿色 : 除了 上 面 的 红色 和 黄色 ， 剩 下 的 都 为 绿色 。 


2.1.2 布局 模型 


flexbox 布 局 由 伸缩 容器 和 伸缩 项 目 组 成 。 任何 一 个 元 素 都 可 以 指定 为 flexbox 布 局 , 其 中 设 为 
display:flex 或 display:inline-flex 的 元 素 称 为 伸缩 容器 。 伸 缩 容 右 的 子 元 素 称 为 伸缩 项 目 ， 伸 
缩 项 目 使 用 伸缩 布局 模型 来 排版 ,伸缩 布局 模型 与 传统 的 布局 不 一 样 , 它 按照 伸缩 流 的 方向 布局 。 
为 了 更 好 地 了 人 解 伸缩 流 布局 ， 我 们 先 看 一 张 来 自 W3C 的 图 片 ， 如 图 2-2 所 示 。 
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图 2-2 ”伸缩 布局 图 


默认 情况 下 ， 伸 缩 容器 由 两 根 轴 组 成 ， 即 主轴 ( main axis ) 和 交叉 轴 ( cross axis )， 其 中 主 
轴 的 开始 位 置 叫做 main start， 结 束 位 置 叫 main end。 交 叉 轴 的 开始 位 置 叫 cross start， 结 束 位 置 叫 
cross end。 伸 缩 项 目 在 主轴 上 占据 的 空间 叫 main size， 在 交叉 轴 上 占据 的 空间 叫 cross size。 根 据 
设置 情况 的 不 同 ， 主 轴 既 可 以 是 水 平 轴 ， 也 可 以 是 垂直 轴 。 不 论 哪个 轴 作 为 主轴 ， 默 认 情 况 下 ， 
伸缩 项 目 总 是 沿 着 主轴 ,从 主轴 开始 位 置 到 主轴 结束 位 置 进行 排列 flexbox 目 前 还 处 于 草稿 状态 ， 
所 以 在 使 用 flexbox 布 局 的 时 候 , 需要 加 上 各 个 浏览 器 的 私有 前 级 ， 即 -webkit、-moz、-ms 、-o 等 。 
本 章 中 为 了 书写 方便 ,一 律 去 掉 了 前 弘 ， 大 家 在 使 用 时 切记 不 要 忘 了 加 前 级 。 


2.1.3 ”伸缩 容器 属性 
伸缩 容器 支持 的 属性 有 : 
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DQ display 

口 flex-direction 
口 flex-wrap 

口 flex-flow 

口 justify-content 


DQ align-items 


DQ align-content 

下 面 简要 介绍 这 儿 个 属性 。 

1. display 

该 属性 用 来 指定 元 素 是 否 为 伸缩 容器 ， 其 语法 为 : 
display:flex | inline-flex 

HTML 代 码 为 : 


<Span class="flex-container"></span> 
下 面 简要 介绍 这 两 个 属性 值 的 含义 。 
口 flex: 这 个 值 用 于 产生 块 级 伸缩 容器 ， 示 例 CSS 代 码 如 下 : 


.flex-container { 
display:flex; 
} 


口 inline-flex: 这 个 值 用 于 产生 行内 级 伸缩 容器 ， 示 例 CSS 代 码 如 下 : 
.flex-container { 


display: inline-flex; 


} 


说 明 这 个 时 候 ，CSS 的 columns 在 伸缩 容器 上 没有 效果 ，fljoat、clear 和 vertical-align 在 伸缩 
项 目 上 没有 效果 。 


2. flex-direction 


该 属性 用 于 指定 主轴 的 方向 ， 其 语法 是 : 


flex-direction: Tow | row-reverse | column | column-reverse 
HTML 代 码 如 下 : 
<span class="flex-container"> 


<Span class="flex-item">1</span> 
<span class="flex-item">2</span> 
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<Span class="flex-item">3</span> 
</span> 


下 面 简要 介绍 这 4 个 属性 值 的 含义 。 


口 row〈 默 认 值 ) : 伸缩 容器 若 为 水 平方 向 轴 ， 伸 缩 项 目的 排版 方式 为 从 左 向 右 排 列 。 示 例 
CSS 代 码 如 下 : 
.flex-container { 
display: flex; 


flex-direction: row; 


} 
效果 如 图 2-3 所 示 。 


ooo 


图 2-3 flex-direction 为 Tfow 的 效果 图 


说 明 flex-directon 的 默认 值 为 fow， 所 以 伸缩 容器 设置 好 后 ， 如 果 是 横向 伸缩 ， 则 无 需 
定义 flex-direction。 


口 row-reverse: 伸缩 容器 若 为 水 平方 向 轴 , 伸缩 项 目的 排版 方式 为 从 右 向 左 排列 。 示 例 CSS 
代码 如 下 : 
.flex-container { 
display: flex; 
flex-direction: row-reverse; 


} 
效果 如 图 2-4 所 示 。 


图 2-4 ”人 ex-direction 为 reverse 的 效果 图 
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口 column: 伸缩 容 需 若 为 垂直 方向 轴 ， 伸 缩 项 目的 排版 方式 为 从 上 向 下 排列 。 示 例 CSS 代 码 
如 下 : 


.flex-container { 
display: flex; 


flex-direction: column; 
} 


效果 如 图 2-5 所 示 。 


图 2-5 flex-direction 为 column 的 效果 图 


口 column-reverse: 伸缩 容 需 若 为 垂直 方向 轴 ， 伸 缩 项 目的 排版 方式 为 从 下 向 上 排列 。 示 例 
CSS 代 码 如 下 : 
.flex-container { 


display: flex; 
flex-direction: column-reverse; 


} 
效果 如 图 2-6 所 示 。 
图 2-6 ”flex-direction 为 column-reverse 的 效果 图 
3. flex-wrap 


该 属性 主要 用 来 指定 伸缩 容 需 的 主轴 线 方向 空间 不 足 的 情况 下 ， 是 否 换行 以 及 该 如 何 换行 ， 
其 语法 为 : 


flex-wrap: nowrap | wrap | wrap-reverse 
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HTML 代 码 如 下 : 


<Span class="flex-container"> 
<span class="flex-item">1</span> 
<span class="flex-item">2</span> 
<span class="flex-item">3</span> 
<span class="flex-item">4</span> 
<span class="flex-item">5</span> 


</span> 
下 面 简要 介绍 这 3 个 属性 值 的 含义 。 


口 nowrap 《默认 值 ): 即使 空间 不 足 ， 伸 缩 容 器 也 不 允许 换行 。 示 例 CSS 代 码 如 下 : 


ex-container { 
display: flex; 
flex-direction: row; 
flex-wrap: nowrap; 
width: 200px; 
height: 150px; 


和 


} 

.flex-item { 
width: 50px; 
height: 50px; 


} 
效果 如 图 2-7 所 示 。 


图 2-7 flex-wrap 为 nowrap 的 效果 图 


口 wrap: 伸缩 容 右 在 空间 不 足 的 情况 下 允许 换行 。 若 主轴 为 水 平 轴 , 则 换行 的 方向 为 从 上 到 
下 。 示 例 CSS 代 码 如 下 : 


.flex-container { 
display: flex; 
flex-direction: row; 
flex-wrap: wrap; 
width: 200px; 
height: 150px; 

} 

.flex-item { 
width: 50px; 
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height: 50px; 


效果 如 图 2-8 所 示 。 
图 2-8 flex-wrap 为 wrap 的 效果 


口 wrap-reverse: 伸缩 容器 在 空间 不 足 的 情况 下 允许 换行 , 若 主轴 为 水 平 轴 ， 则 换行 的 方向 
为 从 下 到 上 (和 wrap 相反 )。 示 例 CSS 代 码 如 下 : 


.flex-container { 

display: flex; 
flex-direction: row; 
flex-wrap: wrap-reverse; 
width: 200px; 

height: 150px; 


} 

.flex-item { 
width: 50px; 
height: 50px; 


效果 如 图 2-9 所 示 。 
加 回国 
图 2-9 flex-wrap 为 wrap-reverse 的 效果 图 
4. flex-flow 


该 属性 是 flex-direction 和 flex-wrap 属 性 的 缩写 版 本 ， 它 同时 定义 了 伸缩 容器 的 主轴 和 侧 
轴 ， 其 默认 值 为 row nowrap。 
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该 属性 的 语法 为 : 
flex-flow: flex-direction flex-wrap 


HTML 代 码 如 下 : 


<span class="flex-container"> 
<Span class="flex-item">1</span> 
<span class="flex-item">2</span> 
<span class="flex-item">3</span> 
<span class="flex-item">4</span> 
<span class="flex-item">5</span> 
</span> 


下 面 我 们 以 flex- 代 ow:row wrap-reverse 为 例 进行 介绍 ， 示 例 CSS 代 码 如 下 所 示 : 


.flex-container { 
display: flex; 
flex-flow: row wrap-reverse; 
width: 200px; 
height: 150px; 
} 


.flex-item { 
width: 50px; 
height: 50px; 

} 


效果 如 图 2-10 所 示 。 


图 2-10 flex-flow 为 row wrap-reverse 的 效果 图 


说 明 ”图 2-10 和 图 2-9 的 效果 一 样 。 


5. justify-content 
该 属性 用 来 定义 伸缩 项 目 沿 主轴 线 的 对 齐 方 式 ， 其 语法 为 : 


justify-content: flex-start | flex-end | center | space-between | space-around 
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HTML 代 码 如 下 : 


<Span class="flex-container"> 
<Span class="flex-item">1</span> 
<Span class="flex-item">2</span> 


<span class="flex-item">3</span> 


下 面 简要 介绍 这 5 个 属性 值 的 含义 。 
口 flex-start 《默认 值 ): 伸缩 项 目 向 主轴 线 的 起 始 位 置 靠 齐 。 示 例 CSS 代 码 如 下 所 示 : 


ex-container { 

display: flex; 
flex-direction: row; 
justify-content: flex-start; 
width: 200px; 

height: 150px; 


ps 


ex-item { 
width: 50px; 
height: 50px; 


效果 如 图 2-11 所 示 。 


加 加 本 


图 2-11 justify-content 为 flex-start 的 效果 图 


口 flex-end: 伸缩 项 目 向 主轴 线 的 结束 位 置 靠 齐 。 示 例 CSS 代 码 如 下 : 


ex-container { 

display: flex; 
flex-direction: row; 
justify-content: flex-end; 
width: 200px; 

height: 150px; 


i 


ex-item { 
width: 50px; 
height: 50px; 
} 
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效果 如 图 2-12 所 示 。 


图 2-12 ”justify-content 为 flex-end 的 效果 图 


D center: 伸缩 项 目 向 主轴 线 的 中 间 位 置 靠 章 。 示 例 CSS 代 码 如 下 所 示 : 


.flex-container { 

display: flex; 

flex-direction: row; 

justify-content: center; 

width: 200px; 

height: 150px; 

} 

.flex-item { 
width: 50px; 
height: 50px; 

} 


效果 如 图 2-13 所 示 。 


图 2-13 ”justify-content 为 center 的 效果 图 


口 space-between: 伸缩 项 目 会 平均 地 分 布 在 主轴 线 里 。 第 一 个 伸缩 项 目 在 主轴 线 的 开始 位 
置 ， 最 后 一 个 伸缩 项 目 在 主轴 线 的 终点 位 置 。 示 例 CSS 代 码 如 下 所 示 : 


.flex-container { 
display: flex; 
flex-direction: row; 
justify-content: space-between; 
width: 200px; 
height: 150px; 
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} 
.flex-item { 


width: 50px; 
height: 50px; 


效果 如 图 2-14 所 示 。 


图 2-14 ”justify-content 为 space-between 的 效果 图 


口 space-around: 伸缩 项 目 会 平均 地 分 布 在 主轴 线 里 ， 两 端 保留 一 半 的 空间 。 示 例 CSS 代 码 
如 下 : 


lex-container { 

display: flex; 

flex-direction: row; 
justify-content: space-around; 
width: 200px; 

height: 150px; 


和 


} 


lex-item { 
width: 50px; 
height: 50px; 


效果 如 图 2-15 所 示 。 


加 回回 


图 2-15 ”justify-content 为 space-around 的 效果 图 


6. align-items 


该 属性 用 来 定义 伸缩 项 目 在 伸缩 容 需 的 交叉 轴 上 的 对 齐 方式 ， 其 语法 为 : 
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align-items: flex-start | flex-end | center | baseline | stretch 
HTML 代 码 如 下 : 


<Span class="flex-container"> 
<span class="flex-item" id="item1">1</span> 
<span class="flex-item"” id="item2">2</span> 
<span class="flex-item" id="item3">3</span> 
</span 


下 面 简要 介绍 这 5 个 属性 值 的 含义 。 
口 flex-start 《默认 值 ): 伸缩 项 目 向 交叉 轴 的 起 始 位 置 靠 齐 。 示 例 CSS 代 码 如 下 : 


.flex-container { 
display: flex; 
flex-direction: row; 
align-items: flex-start; 
width: 200px; 
height: 150px; 

. 

.flex-item { 
width: 50px; 
height: 50px; 


效果 如 图 2-16 所 示 。 


图 2-16 ”align-items 为 flex-start 的 效果 图 


口 flex-end: 伸缩 项 目 向 交叉 轴 的 结束 位 置 靠 齐 。 示 例 CSS 代 码 如 下 : 


.flex-container { 
display: flex; 
flex-direction: row; 
align-items: flex-end; 
width: 200px; 
height: 150px; 

} 

.flex-item { 
width: 50px; 
height: 50px; 

} 
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效果 如 图 2-17 所 示 。 


cal 


图 2-17 align-items 为 flex-end 的 效果 图 


口 center: 伸缩 项 目 向 交叉 轴 的 中 间 位 置 靠 章 。 示 例 CSS 代 码 如 下 : 


.flex-container { 
display: flex; 
flex-direction: row; 
align-items: center; 
width: 200px; 
height: 150px; 

} 

.flex-item { 
width: 50px; 
height: 50px; 

} 


效果 如 图 2-18 所 示 。 


oi 


图 2-18 align-items 为 center 的 效果 图 
口 baseline: 伸缩 项 目 根据 它们 的 基线 对 齐 。 示 例 CSS 代 码 如 下 : 


.flex-container { 
display: flex; 
flex-direction: row; 
align-items: baseline,; 
width: 200px; 
height: 150px; 


.flex-item { 
width: 50px; 
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height: 50px; 


#item1 { 
padding-top: 15px; 


#item2 { 
padding-top: 10px; 


#item3 { 
padding-top: 5px; 


效果 如 图 2-19 所 示 。 
e 图 


图 2-19 align-items 为 baseline 的 效果 图 
口 stretch 《默认 值 ): 伸缩 项 目 在 交叉 轴 方 向 拉 伸 填 充 整个 伸缩 容器 。 示 例 CSS 代 码 如 下 : 


.flex-container { 
display: flex; 
flex-direction: row; 
align-items: stretch; 
width: 200px; 

height: 150px; 

} 
.flex-item { 
width: 50px; 
} 


效果 如 图 2-20 所 示 。 


图 2-20 align-items 为 stretch 的 效果 图 
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说 明 要 看 到 该 属性 的 效果 ， 伸 缩 项 目 是 不 能 设置 高 度 的 。 


7. align-content 


这 个 属性 主要 用 来 调整 伸缩 项 目 出 现 换行 后 在 交叉 轴 上 的 对 齐 方式 , 类 似 于 伸缩 项 目 在 主轴 [200 
上 使 用 justify-content， 其 语法 为 : 


align-content: flex-start | flex-end | center | space-between | space-around | stretch 
HTML 代 码 如 下 : 


<span class="flex-container"> 
<span class="flex-item">1</span> 
<span class="flex-item">2</span> 
<span class="flex-item">3</span> 
<span class="flex-item">4</span> 
<Span class="flex-item">5</span> 
</span> 


说 明 flex-wrap: wrap 这 个 一 定 要 开启 ， 且 它 在 出 现 换 行 的 情况 下 才能 看 到 效果 。 下 面 提 到 的 
伸缩 项 目 均 指 伸缩 项 目 所 在 的 行 ， 因 为 这 里 调整 的 其 实 就 是 伸缩 项 目 换行 后 每 行 之 间 的 
对 齐 方式 。 


下 面 简要 介绍 这 6 个 属性 值 的 含义 。 
口 flex-start 〈 默 认 值 ): 伸缩 项 目 向 交叉 轴 的 起 始 位 置 靠 齐 。 示 例 CSS 代 码 如 下 : 


.flex-container { 
display: flex; 
flex-direction: row; 
flex-wrap: wrap; 
align-content: flex-start; 
width: 200px; 
height: 150px; 
} 
.flex-item { 
width: 50px; 
height: 50px; 


效果 如 图 2-21 所 示 。 
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图 2-21 align-content 为 flex-start 的 效果 图 


口 flex-end: 伸缩 项 目 向 交叉 轴 的 结束 位 置 靠 齐 。 示 例 CSS 代 码 如 下 : 


.flex-container { 
display: flex; 
flex-direction: row; 
flex-wrap: wrap; 
align-content: flex-end; 
width: 200px; 
height: 150px; 

} 

.flex-item { 
width: 50px; 
height: 50px; 


效果 如 图 2-22 所 示 。 


国立 
图 2-22”align-content 为 flex-end 的 效果 图 


口 center: 伸缩 项 目 向 交叉 轴 的 中 间 位 置 靠 齐 。 示 例 CSS 代 码 如 下 : 


.flex-container { 
display: flex; 
flex-direction: row; 
flex-wrap: wrap; 
align-content: center; 
width: 200px; 
height: 150px; 

} 

.flex-item { 
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width: 50px; 
height: 50px; 


效果 如 图 2-23 所 示 。 


图 2-23 ”align-content 为 center 的 效果 图 
口 space-between: 伸缩 项 目 在 交叉 轴 中 平均 分 布 。 示 例 CSS 代 码 如 下 : 


.flex-container { 
display: flex; 
flex-direction: row; 
flex-wrap: wrap; 
align-content: space-between; 
width: 200px; 
height: 150px; 


.flex-item { 
width: 50px; 
height: 50px; 


效果 如 图 2-24 所 示 。 


图 2-24 align-content 为 space-between 的 效果 图 


口 space-around: 伸缩 项 目 在 交叉 轴 中 平均 分 布 ， 且 在 两 边 各 有 一 半 的 空间 。 示 例 CSS 代 码 
如 下 : 
.flex-container { 


display: flex; 
flex-direction: row; 
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flex-wrap: wrap; 
align-content: space-around; 
width: 200px; 
height: 150px; 

} 

.flex-item { 
width: 50px; 
height: 50px; 


效果 如 图 2-25 所 示 。 


国 国 转 


加 本 


图 2-25 align-content 为 space-around 的 效果 图 


口 stretch (默认 值 ): 伸缩 项 目 将 会 在 交叉 轴 上 伸展 以 占用 剩余 的 空间 。 示 例 CSS 代 码 如 下 : 


.flex-container { 
display: flex; 
flex-direction: row; 
flex-wrap: wrap; 
align-content: stretch; 
width: 200px; 
height: 150px; 

} 

.flex-item { 
width: 50px; 
height: 50px; 


效果 如 图 2-26 所 示 。 


El 


图 2-26 ”align-content 为 stretch 的 效果 图 
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2.1.4 伸缩 项 目 属性 
伸缩 项 目 支持 的 属性 有 : 


口 order 


口 flex-grow 

口 flex-shrink 

口 flex-basis 

口 flex 

DQ align-self 

下 面 简要 介绍 这 6 个 属性 。 

1. order 

这 个 属性 用 于 定义 项 目的 排列 顺序 。 数 值 越 小 ， 排 列 越 靠 前 ， 默 认 值 为 0%， 其 语法 为 : 
order: integer 


HTMIL 代 码 如 下 : 


<Span class="flex-container"> 
<Span class="flex-item item1" >1</span> 
<Span class="flex-item item2" >2</span> 
<Span class="flex-item item3" >3</span> 
<span class="flex-item item4" >4</span> 
<Span class="flex-item item5" >5</span> 
</span> 


示例 CSS 代 人 码 如 下 : 


.flex-container { 
display: flex; 
flex-direction: row; 
flex-wrap: wrap; 
width: 200px; 
height: 150px; 


.flex-item { 
width: 50px; 
height: 50px; 

} 

.item5 { 
order: -1; 


} 
效果 如 图 2-27 所 示 。 
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图 2-27 ”order 为 -1 的 效果 图 


说 明 示例 中 由 于 类 名 为 item5 的 元 素 设 置 order 属 性 为 -1， 所 以 排 在 第 一 位 。 


2. flex-grow 


该 属性 定义 伸缩 项 目的 放大 比例 ， 默 认 值 为 0， 即 如 果 存 在 剩余 空间 ， 也 不 放大 。 如 果 所 有 
伸缩 项 目的 flex-grow 设 置 为 1， 那 么 每 个 伸缩 项 目 将 设置 为 一 个 大 小 相等 的 剩余 空间 。 如 果 你 将 
其 中 一 个 伸缩 项 的 flex-grow 值 设置 为 2, 那么 这 个 伸缩 项 目 所 占 的 剩余 空间 是 其 他 伸缩 项 目 所 占 


剩余 空间 的 两 倍 。 其 语法 为 : 
flex-grow: number /* 其 默认 值 为 
HTML 代码 如 下 : 


<Span class="flex-container"> 
<Span class="flex-item item1" 
<Span class="flex-item item2" 
«<span class="flex-item item3" 
<Span class="flex-item item4" 
<Span class="flex-item item5" 
</span> 


示例 CSS 代 码 如 下 : 


.flex-container { 
display: flex; 
flex-direction: row; 
flex-wrap: wrap; 
width: 200px; 
height: 150px; 


.flex-item { 
width: 50px; 
height: 50px; 


.item5 { 
flex-grow:1; 


} 


0 */ 


>1</span> 
>2</span> 
>3</span> 
>4</span> 
>5</span> 
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效果 如 图 2-28 所 示 。 


图 2-28 ”flex-grow 为 1 的 效果 图 


3. flex-shrink 
该 属性 用 来 定义 伸缩 项 目的 收缩 能 力 ， 其 语法 如 下 : 
flex-shrink: number /* 其 默认 值 为 1 */ 


HTML 代 码 如 下 : 


<span class="flex-container"> 
<span class="flex-item item1" >1</span> 
<Span class="flex-item item2" >2</span> 
<span class="flex-item item3" >3</span> 
<span class="flex-item item4"” >4</span> 
<Span class="flex-item item5”>5</spany> 
</span> 


示例 CSS 代 码 如 下 : 


.flex-container { 
display: flex; 
flex-direction: row; 
flex-wrap: nowrap; 
width: 200px; 
height: 150px; 

} 

.flex-item { 
width: 50px; 
height: 50px; 


.item5 { 
flex-shrink: 3; 
} 


效果 如 图 2-29 所 示 。 
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加 图 国 国有 


图 2-29 ”flex-shrink 为 3 的 效果 


说 明 本 例子 中 ， 类 名 为 item5 的 元 素 在 空间 不 足 的 情况 下 ， 


4. flex-basis 


图 


缩小 为 其 他 元 素 缩小 大 小 的 1/3。 


该 属性 用 来 设置 伸缩 项 目的 基准 值 ， 剩 余 的 空间 按 比 率 进 行 伸缩 ， 其 语法 如 下 : 


flex-basis: length | auto 
哮 认 值 为 auto。 
HTML 代 码 如 下 : 


<Span class="flex-container"> 
<Span class="flex-item item1" 
«<span class="flex-item item2" 
<Span class="flex-item item3" 
<span class="flex-item item4" 
<Span class="flex-item item5" 
</span> 


示例 CSS 代 码 如 下 : 


.flex-container { 
display: flex; 
flex-direction: row; 
flex-wrap: wrap; 
width: 200px; 
height: 150px; 


>1</span> 
>2</span> 
>3</span> 
>4</span> 
>5</span> 


} 

.flex-item { 
width: 50px; 
height: 50px; 


} 
.item5 { 

flex-basis: 100px; 
} 
效果 如 图 2-30 所 示 。 
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图 2-30 ”flex-basis 为 100px 的 效果 图 


5. flex 


该 属性 是 flex-grow、flex-shrink 和 flex-basis 这 3 个 


三 
| 
| 


性 的 缩写 ， 其 语法 如 下 : 


flex: none | flex-grow flex-shrink flex-basis 
其 中 第 二 个 参数 和 第 三 个 参数 ( flex-shrink 和 flex-basis ) 是 可 选 参数 。 默 认 值 为 0 1 auto。 
HTMIL 代 码 如 下 : 


<span class="flex-container"> 
<Span class="flex-item item1" >1</span> 
<Span class="flex-item item2" >2</span> 
<span class="flex-item item3" >3</span> 
</span> 


示例 CSS 代 码 如 下 : 


.flex-container { 
display: flex; 
flex-direction: row; 
width: 200px; 
height: 150px; 

} 

.flex-item { 
width: 50px; 
height: 50px; 

} 

.item3 { 
flex: 1; 


} 
效果 如 图 2-31 所 示 。 


说 明 本 例子 中 ， 类 名 为 item3 的 元 素 宽 度 为 90。 当 该 元 素 被 设置 为 flex:1 后 ， 该 元 素 就 会 把 伸 
缩 容器 的 剩余 空间 占 满 ， 其 实 本 质 上 就 等 于 flex-grow:1。 


性 有 两 个 快捷 值 : auto ( 即 1 1 auto ) 和 none ( 即 0 0 auto )。 


< 
Xr 
全 
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图 2-31 ”flex 为 1 的 效果 图 


6. align-self 
该 属性 用 来 设置 单独 的 伸缩 项 目 在 交叉 轴 上 的 对 齐 方 式 ,会 覆 写 默认 的 对 齐 方式 ,其 语法 如 下 : 
align-self: auto | flex-start | flex-end | center | baseline | stretch 


HTML 代 码 如 下 : 


<Span class="flex-container"> 
<Span class="flex-item item1" >1</span> 
<span class="flex-item item2" >2</span> 
<span class="flex-item item3" >3</span> 
</span> 


下 面 简要 介绍 这 6 个 属性 值 。 


口 auto: 伸缩 项 目 按照 自身 设置 的 宽 高 显示 ， 如 果 没 有 设置 ， 则 按 stretch 来 计算 其 值 。 示 
例 CSS 代 码 如 下 : 


.flex-container { 
display: flex; 
flex-direction: row; 
flex-wrap: wrap; 
width: 200px; 
height: 150px; 

} 

.flex-item { 
width: 50px; 
height: 50px; 


.item3 { 

align-self: auto; 
} 
效果 如 图 2-32 所 示 。 
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图 2-32 ”align-self 为 auto 的 效果 图 


口 flex-start: 伸缩 项 目 向 交叉 轴 的 开始 位 置 靠 齐 。 示 例 CSS 代 码 如 下 : 


.flex-container { 
display: flex; 
flex-direction: row; 
flex-wrap: wrap; 
width: 200px; 
height: 150px; 

} 

.flex-item { 
width: 50px; 
height: 50px; 


上 
.item3 { 
align-self: flex-start; 
} 
效果 如 图 2-33 所 示 。 


图 2-33 ”align-self 为 人 ex-start 的 效果 图 


口 flex-end: 伸缩 项 目 向 交 义 轴 的 结束 位 置 靠 章 。 示 例 CSS 代 码 如 下 : 


.flex-container { 
display: flex; 
flex-direction: row; 
flex-wrap: wrap; 
width: 200px; 
height: 150px; 
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.flex-item { 
width: 50px; 
height: 50px; 
} 
.item1 { 
align-self: flex-end; 
} 


效果 如 图 2-34 所 示 。 


回国 


图 2-34 align-self 为 flex-end 的 效果 图 
口 center: 伸缩 项 目 向 交叉 轴 的 中 心 位 置 靠 齐 。 示 例 CSS 代 码 如 下 : 


.flex-container { 
display: flex; 
flex-direction: row; 
flex-wrap: wrap; 
width: 200px; 
height: 150px; 

} 

.flex-item { 
width: 50px; 
height: 50px; 


} 
.item1 { 

align-self: center; 
} 
效果 如 图 2-35 所 示 。 


图 2-35 align-self 为 center 的 效果 图 
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口 baseline: 伸缩 项 目 按 基线 对 齐 。 示 例 CSS 代 码 如 下 : 


.flex-container { 
display: flex; 
flex-direction: row; 
flex-wrap: wrap; 
width: 200px; 
height: 150px; 


} 
.flex-item { 
width: 50px; 
height: 50px; 
} 
.item1 { 
align-self: baseline; 
font-size: 40px; 
} 
.item2 { 
align-self: baseline; 
font-size: 30px; 
} 
.item3 { 
align-self: baseline; 
font-size: 20px; 


} 
效果 如 图 2-36 所 示 。 


Hag 


图 2-36 align-self 为 baseline 的 效果 图 


说 明 从 示例 中 可 以 看 到 ， 每 个 伸缩 项 目 都 是 沿 交叉 轴 的 方向 ， 按 照 前 一 个 伸缩 项 目的 
基线 作为 对 齐 起 点 的 。 


D stretch: 伸缩 项 目 在 交叉 轴 方 向 占 满 伸缩 容器 。 示 例 CSS 代 码 如 下 : 


.flex-container { 
display: flex; 
flex-direction: row; 
flex-wrap: wrap; 
width: 200px; 
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height: 150px; 


.flex-item { 
width: 50px; 


.item1 { 
align-self: stretch; 
] 


.item2 { 
align-self: stretch; 
height: 50px; 


.item3 { 
height: 50px; 


效果 如 图 2-37 所 示 。 


图 2-37 align-self 为 stretch 的 效果 图 


说 明 本 例 中 交叉 轴 为 重 直 轴 ， 所 以 只 有 在 不 设置 高 度 的 情况 下 才能 看 到 效果 。 在 类 
名 为 item2 的 元 素 中 ， 虽 然 设 置 了 stretch,， 但 是 由 于 设置 了 height， 所 以 看 不 到 


效果 。 


2.1.5 在 React Native 中 使 用 flexbox 


React Native 将 Web 中 的 flexbox 布 局 引入 进来 ， 使 得 视图 的 布局 更 加 简单 。 从 官网 上 了 人 解 到 ， 
React Native 目 前 主要 支持 flexbox 的 如 下 属性 : 


口 aljignItems 

口 alignSelf 

口 flex 

口 flexDirection 
口 flexWrap 

口 justifyContent 
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下 面 简 要 介绍 这 6 个 属性 。 

1. alignItems 

该 属性 的 用 法 同 前 面 的 align-items， 区 别 在 于 它 需要 用 驼峰 拼写 法 ， 其 语法 如 下 : 

alignItems: flex-start | flex-end | center | stretch 人 
2. alignSelf 

该 属性 的 用 法 同上 面 的 align-self， 区 别 在 于 它 需 要 用 驼峰 拼写 法 ， 其 语法 如 下 : 


alignSelf: auto | flex-start | flex-end | center | stretch 


3. flex 
该 属性 的 用 法 同上 面 的 flex， 其 语法 如 下 : 


flex: number 
4. flexDirection 


该 属性 的 用 法 同上 面 的 flex-direction, 区 别 在 于 React Native 中 默认 的 是 column, 其 语法 为 : 


flexDirection: row | column 
5. flexWrap 
该 属性 的 用 法 同上 面 的 flex-wrap， 区 别 在 于 需要 用 驼峰 拼写 法 ， 其 语法 如 下 : 


flexWrap: wrap | nowrap 
6. justifyContent 
该 属性 的 用 法 同上 面 的 justify-Content， 区 别 在 于 需要 用 弦 峰 拼写 法 ， 其 语法 如 下 : 


justifyContent: flex-start | flex-end | center | space-between | space-around 


2.1.6 ”实例 
我 们 用 flexbox 布 局 来 实现 一 个 标准 的 盒子 模型 应 用 BoxApp。 对 于 盒子 模型 ， 用 过 的 同学 应 
该 都 比较 熟悉 ， 它 是 CSS 中 排版 布局 的 重要 方法 。 它 包括 的 属性 有 margin、border 和 padding 等 。 


这 里 的 运行 环境 为 Phone 6Plus， 我 们 先 从 一 个 简单 的 容器 壳 开 始 。 首 先 列 出 HTML5 中 的 主 
要 代码 实现 。 


HTML 代 码 如 下 : 


<span class="margginBox"> 
<span class="box height400 width400"> 
<Span class="label">margin</span> 
<span class="top height50 bgred">top</span> 
<Span class="borderBox"> 
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<Span class="left bgred">left</span> 
<span class="right bgred">right</span> 
</span> 
<span class="bottom height50 bgred">bottom</span> 
</span> 
</span> 


CSS 代 码 如 下 : 


.margginBox { 
position: absolute; 
top: 100px; 
padding-left: 7px; 
padding-right: 7px; 

} 

.box { 

display: flex; 

flex-direction: column; 

flex: 1; 

position: relative; 

color: #FDC72F; 

ine-height: 1enm; 


让 


} 

.height400 { 
height: 400px; 

} 

.width400 { 
width: 400px; 


} 
.label { 
top: 0; 
left: 0; 
padding: 0 3px 3px 0; 
position: absolute; 
background-color: #FDC72F; 
color: white; 
line-height: 1em; 


} 

.top { 

width: 100%; 

justify-content: center; 

display: flex; 

align-items: center; 

} 

.bottom { 
width: 100%; 

display: flex; 

justify-content: center; 
align-items: center; 

} 


.right { 

width: 50px; 

display: flex; 
justify-content: space-around; 


W 
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} 


.h 


.b 


} 


2.1 flexbox 布局 


align-items: center; 


eft { 

width: 50px; 

display: flex; 
justify-content: space-around; 
align-items: center; 


eight50 { 
height: 50px; 


gred { 
background-color: #6AC5AC; 


下 面 我 们 来 分 析 其 中 主要 的 CSS 代 码 。 


DOOOOODO 
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.margginBox 定 义 了 一 个 容 需 的 位 置 ， 该 容 需 距 top 为 100px。 

.box 定 义 为 一 个 伸缩 容器 ， 且 以 交叉 轴 方 向 伸缩 。 

.height400 定 义 了 高 度 为 400px。 

.height50 定 义 了 高 度 为 50px。 

.width400 定 义 了 宽度 为 400px。 

.bgred 定 义 背景 颜色 。 

.label 定 义 标签 的 显示 位 置 ， 本 例 中 是 以 绝对 定位 的 方式 显示 在 容器 的 左上 角 。 

.top 、.bottom 定 义 了 宽度 为 100%， 也 定义 自身 为 伸缩 容器 ， 并 设置 了 内 部 元 素 沿 主轴 和 
交叉 轴 都 居中 。 


居中 ,， 沿 主轴 等 间隔 分 布 。 


下 面 看 一 下 React Native 中 的 主要 代码 实现 : 


Va 


r React = require('react-native'); 
rt 
AppRegistry, 
StyleSheet, 
Text， 


= React; 
r BoxSstyles = StyleSheet.create({ 
"height50": { 

height: 50， 


】， 
"height400": { 
height: 400, 


} 

"width400": { 
width: 400， 

} 

"bgred": { 
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backgroundColor: "#6AC5AC", 


"box": { 
flexDirection: "column", 
flex: 1， 
position: "relative", 
】， 
"label": { 
top: 0， 
left: 0， 
paddingTop: 0， 
paddingRight: 3， 
paddingBottom: 3， 
paddingLeft: 0， 
position: "absolute ， 
backgroundColor: "#FDC72F", 
}, 
"top": { 
justifyContent: "center", 
alignItems: "center", 
]， 
"bottom": { 
justifyContent: "center", 
alignItems: "center", 


]， 
"right": { 
width: 50， 
justifyContent: "space-around", 
alignItems: "center", 
]， 
ER 
width: 50， 


justifyContent: "space-around", 
alignItems: "center", 


"ye | low": { 
color: "#FDC72F", 
fontWeight:"900", 


white": { 
color: "white", 
fontWeight:"900", 

外 ， 

"margginBox":{ 
"position": "absolute", 
"top": 100, 
"paddingLeft":7, 
"paddingRight":7, 

]， 

"borderBox":{ 

ex: :Ly 

justifyContent: "space-between", 

flexDirection: "row", 


} 
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]) 


Var BoxContainer = React.createClass({ 
render: function(){ 
return ( 
<View style={[BoxStyles.margginBox]} ref="lab1"> 
<View style={[BoxStyles.box,BoxStyles.height400,BoxStyles .width400]}> 
<View style={[BoxStyles.top,BoxStyles.height50,BoxStyles.bgred]}> 
<Text style={BoxStyles.yellow}>top</Text> 
</View> 
<View style={[BoxStyles.borderBox]}> 
<View style={[BoxStyles.1left,BoxStyles.bgred]} > 
<Text style={BoxStyles.yellow}>left</Text> 
</View> 
<View style={[BoxStyles.right,BoxStyles.bgred]}> 
<Text style={BoxStyles.yellow}>right</Text> 
</View> 
</View> 
<View style={[BoxStyles.bottom,BoxStyles.height50,BoxStyles.bgred]}> 
<Text style={BoxStyles.yellow}>bottom</Text> 
</View> 
<View style={[BoxStyles.1abel]} > 
<Text style={BoxStyles.white}>margin</Text> 
</View> 
</View> 
</View> 
) 
} 
]) 


AppRegistry.registerComponent('Box', () => BoxContainer); 


可 以 看 到 ， 在 React Native 中 ， 全 部 的 代码 都 是 由 JavaScript 来 完成 的 。 
图 2-38 是 marginBox 容 需 的 效果 。 


图 2-38 ”BoxApp 之 marginBox 容 器 效果 图 
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在 上 面 的 示例 中 ，HTML5 代 码 中 涉及 的 属性 如 下 : 
DQ display 

口 flex-direction 

口 flex 

口 justify-content 

DD align-items 

React Native 中 涉及 的 属性 如 下 : 

口 justifyContent 

口 alignItems 

口 flex 


口 flexDirection 
下 面 我 们 分 别 从 样式 、 元 素 和 书写 格式 这 3 个 方面 简要 介绍 HTML5 与 React Native 的 差异 。 
口 样式 。HTML5 上 的 写法 为 : 


-margginBox { 
position: absolute; 
top: 100px; 
padding-left: 7px; 
padding-right: 7px; 

} 


React Native 上 的 写法 为 : 


"margginBox":{ 
"position": "absolute", 
"top": 100, 
"paddingLeft": 7， 
"paddingRight": 7， 

} 


口 元 素 。HTML5 代 码 如 下 : 


<Span class="margginBox"> 
<span class="box height400 width400"> 
<span class="label">margin</span> 


<View style={[BoxStyles.1abel]} > 
<Text style={BoxStyles.white}>margin</Text> 
</View> 
</View> 
</View> 
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可 以 看 出 ，HTML5 上 元 素 的 显示 层级 是 绝对 定位 层级 较 高 ， 而 React Native 中 的 显示 层 
级 是 后 面 比 前 面 的 高 。 若 在 React Native 中 将 代码 提前 到 第 一 行 ， 它 将 会 被 后 面 的 元 素 覆 
善 掉 。 

口 书写 格式 。 这 方面 的 差异 如 下 所 示 。 


图 HTML5 以 分 号 ( ; ) 结尾 ，React Native 以 逗号 (, ) 结尾 。 

国 HTML5 中 key、value 都 不 加 引号 ， React Native 中 key 、value 属 于 JavaScript 对 象 , 如 果 value 
为 字符 串 , 需要 用 引号 引起 来 , 并 且 key 值 中 间 不 能 出 现 " -", 一 定 要 转 为 驼峰 命名 方式 。 

加 HTML5 中 ，value 值 为 数字 时 ， 需 带 单 位 ，React Native 中 则 不 用 带 。 


案例 的 全 部 代码 在 后 面 的 案例 代码 库 中 可 以 下 到 ， 最 终 的 效果 如 图 2-39 所 示 。 


fightl right 国 本 站 


图 2-39 BoxApp 效 果 图 


2.2 React 中 的 JSX 


首先 ， 我们 先 认识 下 React。React 由 ReactJS 与 React Native 组 成 ， 其 中 ReactJS 是 Facebook 开 
源 的 一 个 前 端 框 架 ，React Native 是 ReactJS 思 想 在 native 上 的 体现 。 


2.2.1 JSX 入 门 
我 们 先 从 hello world 开 始 ， 下 面 是 基于 JSX 写 的 一 段 代码 : 
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var component = React.createClass({ 
render: function() { 
return «<div>hello world</div> 


} 
]); 
var Component = React.createClass({ 
render: function() { 
return React.createElement('div', null, 'hello world') 


} 
})); 


代码 给 人 最 直观 的 感觉 就 是 ， 对 于 习惯 了 Web 开 发 的 人 来 说 ， 在 JavaScript 代 码 中 写 HTML 代 
码 这 种 做 法 刚 开 始 可 能 比较 难 接受 。 但 是 当 你 习惯 后 ， 便 会 党 得 它 不 是 那么 别扭 ， 反 而 很 舒服 ， 
它 带 来 的 最 直接 的 好 处 便 是 能 够 很 直观 地 构建 出 页 面 结构 。 

那么 ， 什 么 是 JSX 呢 ? 其 实 JSX 并 不 是 一 门 新 的 语言 ， 仅 仅 是 个 语法 糖 ， 人 允许 开发 者 在 
JavaScript 中 书写 HTML 语 法 。 最 后 ,每 个 HTML 标 签 都 转化 为 JavaScript 代 码 来 运行 。 这 样 对 于 使 
用 JavaScript 来 构建 组 件 以 及 组 件 之 间 关 系 的 应 用 ， 在 代码 层面 显得 更 加 清晰 ， 而 不 再 是 用 
JavaScript 操 作 DOM 来 创建 组 件 以 及 组 件 之 间 的 艇 套 关系 。 


说 明 语法 糖 (syntactic sugar ), 也 译 为 糖衣 语法 , 是 由 英国 计算 机 科学 家 彼得 :约翰 : 兰 达 ( Peter 
J.Landin ) 发 明 的 一 个 术语 ， 指 计算 机 语言 中 添加 的 某 种 语法 ， 这 种 语法 对 语言 的 功能 并 
没有 影响 ， 但 是 更 方便 程序 员 使 有 用。 通常 来 说 ， 使 用 语法 糖 能 够 增加 程序 的 可 读 性 ， 从 
而 减少 程序 代码 出 错 的 机 会 。 


1. 环境 

JSX 必 须 借 助 ReactJS 环 境 才 能 运行 ， 在 编写 JSX 代 码 之 前 ， 需 要 先 加 载 ReactJS 文 件 ， 如 : 
react-0.13.3.js。 当 然 光 有 ReactJS 还 不 行 , 还 需要 加 载 JSX 的 解析 器 , 如 : JSXTransformer-0.13.3.js。 
所 以 最 终 的 运行 环境 代码 为 : 


<script src="./build/react-0.13.3.js"></script> 
<script src="./build/JSXTransformer-0.13.3.js"></script> 


2. 载 入 方式 
JSX 目 前 有 两 种 方法 载 人 。 


口 内 联 方式 的 载 入 。 相 关 代码 如 下 : 


<script type="text/jsx"> 

// 这 里 书写 JSX 代 码 

React.render( 
<h1>Hello，worldl</h1>,// 这 便 是 内 联 的 JSX 代 码 
document .getElementById('example') 
); 


«</script> 
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口 外 联 方式 的 载 入 。 将 下 面 的 代码 单独 放 在 一 个 helloworld.jsx 的 文件 中 : 


helloworld.jsx: 
React.render( 
<h1i>Hello, world!</h1>, 
document .getElementById('example') 


); 
然后 在 页 面 上 通过 下 面 的 方式 引入 helloworld.jsx 文 件 : 


<script type="text/jsx" src="helloworld.jsx"></script> 
3. 标签 
JSX 标 签 其 实 就 是 HTML 标 签 ， 如 : 
<h1i>Hello, ReactJS!!l</h1> 


只 是 我 们 在 JavaScript 中 书写 这 些 标签 时 , 不 再 像 以 前 那样 作为 字符 串 用 引号 引起 来 , 而 是 像 
在 XML 文 件 中 书写 一 样 ， 直接 写 即 可 。 然而 还 有 一 类 标签 是 HTML 所 没有 的 , 但 是 我 们 也 可 以 使 
用 ， 那 就 是 用 ReactJS 创 建 的 组 件 类 标签 ， 示例 代 码 如 下 : 
var Hello = React.createClass({ 
render: function() { 
return «div>Hello</div>; 
} 
)); 
React.render( 
<Hello/>, 


document.getElementById('container') 
) 


在 上 面 的 代码 中 ， 我 们 创建 了 一 个 叫 Hello 的 组 件 ， 此 时 我 们 就 可 以 像 使 用 HTML 标 签 一 样 ， 
通过 <Hello/> 的 方式 把 它 引 入 进来 。 不 过 有 一 点 需要 注意 的 是 , ReactJS 中 约定 自 定义 的 组 件 标 签 
首 字母 一 定 要 大 写 ， 这 样 便于 区 分 是 组 件 标 签 还 是 HTML 标 签 。 

4. 转换 

JSX 的 书写 , 只 是 为 了 让 我 们 能 更 直观 地 看 到 组 件 的 DOM 结 构 , 它 并 不 能 直接 在 浏览 器 端 运 
行 。 最 后 只 能 通过 解析 器 将 其 转化 为 JavaScript 代 码 才 能 在 浏览 器 端 运行 。 

比如 ， 我 们 写 了 一 段 代 码 : 

<h1>Hello, ReactJS!! </h1> 
那么 解析 器 会 将 其 转化 为 

React.createElement("h1", null, "Hello, ReactJS!!") 


可 以 看 到 , 其 实 我 们 每 写 一 个 标签 , 就 相当 于 调用 一 次 React .createElement 方 法 并 最 后 返回 
一 个 ReactElement 对 象 给 我 们 。 
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那么 , React.createEflement 方 法 中 的 这 些 参数 分 别 代 表 什 么 意思 呢 ?” 下 面 我 们 看 官方 的 一 个 
参数 解释 : 


React.createElement( 
string/ReactClass type, 
[object props], 
[children ...] 


该 方法 的 第 一 个 参数 可 以 是 一 个 字符 串 ， 表 示 是 一 个 HTML 标 准 内 的 元 素 ， 或 者 是 一 个 
ReactClass 类 型 的 对 象 ， 表 示 我 们 之 前 封装 好 的 自 定义 组 件 。 第 二 个 参数 是 一 个 对 象 , 或 者 说 是 
字典 也 可 以 ， 它 保存 了 这 个 元 素 的 所 有 固有 属性 ( 即 传 人 后 基本 不 会 改变 的 值 )。 从 第 三 个 参数 
开始 ， 之 后 的 参数 都 被 认 作 是 元 素 的 子 元 素 。 

5. 执行 JavaScript 表 达 式 

做 Web 开 发 时 ， 经 常会 用 到 模板 。 我 们 知道 模板 中 是 可 以 执行 JavaScript 代 码 的 ， 那 么 JSX 也 
不 例外 。 接 下 来 ， 我 们 看 下 JSX 是 怎么 执行 JavaScript 代 码 的 。 

下 面 我 们 先 定 义 一 个 变量 : 

Var msg = "Hello ReactJS!!"; 


然后 在 JSX 中 调用 该 变量 : 


<h1i>{msg}</h1> 
解析 完 后 的 结果 如 下 : 


Var msg = "Hello, ReactJS!!"; 
React.createElement("h1i", null, msg) 


可 以 看 出 ， 在 JSX 中 运行 JavaScript 表 达 式 ， 需 要 将 表达 式 用 {} 括 起 来 。 

6. 注释 

书写 代码 的 时 候 ， 注 释 是 必 不 可 少 的 ， 一 来 便于 了 解 代码 的 结构 ， 二 来 便于 日 后 的 维护 。 
在 JSX 中 ， 当 然 也 可 以 使 用 注释 ， 那 么 它 的 注释 方式 又 是 如 何 的 呢 ? 

其 实 我 们 可 以 猜 到 ,JSX 最 终 都 是 被 编译 为 JavaScript 运 行 的 , 所 以 它 的 注释 应 该 和 JavaScript 
一 样 。 没 错 ， 你 的 猜测 是 正确 的 。 

在 JSX 中 ， 也 分 为 单行 注释 和 多 行 注释 。 下 面 我 们 通过 一 个 示例 来 更 好 地 理解 它 。 

这 是 书写 的 JSX 代 码 : 

var msg = "Hello，ReactJS11"; 


//<h1i>msg</h1> 单 行 注释 
/沙洲 


<h1>msg</h1> 多 行 注释 
**/ 
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这 是 编译 后 的 JSX 代 码 : 


var msg = "Hello, ReactJS!!"; 
//<h1>msg</h1> 单 行 注释 


/ 半 炒 


<hi>msg</h1> 多 行 注释 
+**/ 


7. 属性 
我 们 知道 ， 在 HTML 中 可 以 通过 标签 上 的 属性 来 改变 当前 元 素 的 样式 。 当 然 ， 在 JSX 中 也 可 
以 使 用 该 功能 。 我 们 看 下 面 的 一 个 示例 ; 


var msg = <h1 width="10px">Hello, ReactJS!!</h1>; 
这 里 我 们 设置 了 hi 标签 的 宽度 为 10px， 该 行 代 码 转化 后 的 结果 为 : 
var msg = React.createElement("h1", {width: "10px"}, "Hello, ReactJS!!"); 


可 以 看 到 , 我 们 设置 的 属性 都 被 作为 React .createElement 方 法 的 第 二 个 参数 输入 进去 了 。 这 
也 对 应 了 上 面 对 React.createElement 第 二 个 参数 的 介绍 。 

8. 延展 属性 

随 着 JavaScript 的 飞速 发 展 ，ES6 的 功能 也 逐渐 被 浏览 器 厂商 所 支持 。 在 JSX 中 ， 我 们 完全 可 
以 使 用 ES6 的 语法 。 因 为 我 们 有 强大 的 解析 器 会 对 不 支持 ES6 语 法 的 浏览 器 做 降级 处 理 。 我 们 看 
下 面 的 示例 : 

var props = {}; 

props.foo ="1"; 


props.bar = "1"; 
<h1 {...props} foo="2" >Hello, ReactJS!!</h1> 


上 面 的 书写 会 被 转化 为 : 


var props = {}; 
props.foo ="1"; 
props.bar = "1"; 
React.createElement("h1", React. spread({}, props, {foo: "2"}), "Hello, ReactJS!!") 


这 里 我 们 最 关注 的 便 是 “.…”， 这 是 什么 用 法 呢 ? 在 ES6 中 ， 该 功能 是 用 来 遍历 对 象 的 ， 那 
么 上 面 所 写 的 .. .props 的 意思 便 是 遍历 props 这 个 对 象 ， 并 且 将 它 的 所 有 属性 都 赋值 给 h1 这 个 元 
素 。 这 里 要 注意 的 是 ， 元 素 后 面 定 义 的 属性 会 覆盖 掉 前 面 的 属性 。 上 例 中 的 foo="2" 便 把 之 前 的 
foo ="1" 窗 六 了 。 

9. 自 定义 属性 

之 前 我 们 讲 到 的 “属性 ”是 指标 签 特 有 的 属性 ， 自 定义 属性 便 是 自己 定义 的 一 些 属性 , 但 是 
在 真正 的 页 面 演 染 后 , 它 不 一 定 显示 在 页 面 上 。 那 么 ,什么 样 的 自 定义 属性 才能 演 染 在 页 面 上 呢 ? 
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HTML5 给 出 了 方案 ， 凡 是 以 data- 开 头 的 自 定义 属性 ， 在 页 面 演 染 后 均 可 以 显示 在 页 面 上 。 为 了 
更 加 清晰 易 懂 ， 我 们 来 看 个 例子 。 
我 们 在 JSX 中 进行 如 下 的 书写 : 


var hello = <h1 height="100" data-test="test" test="test">Hello, ReactJS!!!</h1>; 
React.render( 

hello, 

document.getElementById('example') 

); 


经 过 JSX 解 析 需 解析 后 的 结果 为 : 
var hello = React.createElement("h1", {height: "100", 
"data-test": "test", test: "test"}, "Hello, ReactJS!!!"); 
React.render( 
hello, 


document.getElementById('example') 
); 


现在 看 最 后 泻 染 在 页 面 上 的 显示 结 
<h1 height="100" data-test="test" data-reactid=".0">Hello, ReactJS!!!l</h1> 


在 该 例子 中 ， 我 们 自 定义 了 属性 data-test 和 test， 最 后 页 面 中 只 显示 了 data-test。 可 见 ， 
以 data- 开 始 的 自 定 义 属性 会 被 演 染 到 页 面 上 ， 其 他 自 定义 属性 会 被 忽略 掉 。 


10. 显示 HTML 


有 时 候 , 我 们 需要 显示 一 段 HTML 字 符 串 ,而 不 是 HTML 节点 , 那么 这 在 JSX 中 怎么 实现 呢 ? 
这 需要 我 们 的 _html 属 性 上 场 了 。 我 们 看 下 面 的 例子 : 


<div>{{_html:'<h1i>Hello, ReactJS!!!</h1>'}}</div> 

转化 后 的 结果 为 : 

React.createElement("div", null, {_ html:'<hi>Hello, ReactJS!!!l</h1>'}) 
此 时 JSX 就 以 字符 串 的 方式 将 HTML 显 示 在 了 页 面 上 。 

11. 样式 使 用 


在 做 Web 开 发 中 ， 元 素 的 样式 是 必 不 可 少 的 角色 ， 那 么 在 JSX 中 能 像 在 HTML 中 那样 使 用 样 
式 吗 ? 答案 是 否定 的 。 那 么 , 在 JSX 中 究竟 该 如 何 使 用 样式 呢 ? 这 与 我 们 用 JavaScript 直 接 操 作 样 
式 很 类 似 。 下 面 是 一 段 在 JSX 中 使 用 样式 的 代码 。 


JSX 中 的 输入 : 
<h1 style={{color: '#ff0000', fontSize: '14px'}}>Hello, ReactJS!!!</h1> 
解析 需 转 化 后 的 结果 : 
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React.createElement("h1", {style: {color: '#ff0000', fontSize: '14px'}}, "Hello, ReactJS!!!") 


下 面 我 们 分 析 一 下 上 面 的 代码 。 首 先 ，JSX 中 的 样式 是 通过 style 属 性 定义 的 。 和 传统 Web 
定义 不 同 的 是 ， 它 不 再 是 一 个 字符 串 而 是 一 个 JavaScript 对 象 。 在 上 面 的 代码 中 ， 第 一 个 大 括号 
是 JSX 语 法 ， 第 二 个 大 括号 是 JavaScript 对 象 ， 我 们 把 需要 定义 的 样式 都 以 对 象 的 方式 写 在 这 个 
大 括号 里 。 需 要 注意 的 是 ,我们 要 将 属性 名 转 为 驼峰 命名 格式 ， 若 不 转 的 话 ， 需 要 加 引号 括 起 
来 。 比如 ,'font-size':'13px' 或 者 fontSize:'13px', 这 其 实 就 是 JavaScript 中 JSON 的 书写 方式 。 
当然 ， 我 们 也 可 以 通过 className 三 xxx 的 方式 引入 样式 ， 但 是 切记 是 className 而 不 是 class。 


12. 事件 绑 定 


通过 上 面 的 学 习 ， 我 们 了 解 到 JSX 中 结构 的 定义 和 样式 的 使 用 。 接 下 来 ， 我 们 主要 说 说 JSX 
中 的 交互 用 法 。 我 们 知道 没有 交互 , 就 相当 于 没有 灵魂 。 那 么 , JSX 中 的 交互 到 底 是 什么 样子 呢 ? 


这 是 一 段 JSX 中 事件 绑 定 的 代码 : 


function testClick(){ 
alert( ' testClick' ); 
} 
var app= <button onClick={testClick.bind(this)} style={{ 
bacogroundColor: '#ff0000', 
fontSize: '28px', 
width:"'200px'，, 
hejight: 100px 
}}>Hello, ReactJS!!!l</button> 
React.render( 


app， 
document.getElementById('example') 


小 

这 段 代 码 实现 的 功能 是 ， 点 击 一 个 按钮 的 时 候 ， 弹 出 一 个 写 着 testClick 的 提示 框 。 这 个 功 
能 看 起 来 和 在 HTML 中 使 用 的 绑 定 事件 几乎 一 样 。 没 错 ，JSX 支 持 所 有 的 HTML 元 素 的 事件 。 不 
过 有 几 点 还 是 需要 拿 出 来 提醒 一 下 大 家 。 首 先 ， 事 件 名称 一 定 要 采用 驼峰 命名 方式 ， 上 面 的 
onClick 要 是 换 成 onclick 就 不 起 效果 了 。 其 次 ， 有 个 技巧 给 大 家 分 享 下 ， 如 果 要 给 绑 定 的 事件 传 
递 参 数 ， 若 要 给 testClick 传 递 一 个 hello 的 字符 串 ， 可 以 这 样 写 onClick={ftestClick.bind 
(this,'hello')}。 可 以 看 到 ,这 里 需要 调用 bind 方 法 ,这 个 方法 的 第 一 个 参数 主要 用 来 设置 作用 
域 ， 从 第 二 个 开始 便 是 我 们 想 要 传递 的 参数 了 。 

通过 上 面 的 学 习 , 我 们 已 经 对 JSX 有 了 一 个 很 全 面 的 认识 , 可 能 有 的 同学 已 经 开始 按 捧 不 住 ， 
想 要 开始 写 点 什么 啦 ， 下 面 我 们 就 来 讲 讲 JSX 的 实际 应 用 场景 。 


2.2.2 JSX 实战 之 ReactJS 


说 到 JSX 在 ReactJS 中 的 用 法 , 我 们 需要 先 了 解 ReactJS 中 的 一 些 概 念 。 了 解 这 些 概念 ， 对 于 我 
们 掌握 JSX 的 使 用 方法 很 有 帮助 。 下 面 我 们 主要 从 ReactJS 的 组 件 入 手 , 带领 大 家 了 解 ReactJS, 了 
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解 JSX 在 其 中 的 使 用 情况 。 
1. ReactJS 简介 


ReactUSs 的 核心 思想 便 是 组 件 化 ， 即 按 功能 封装 成 一 个 一 个 的 组 件 ， 各 个 组 件 维护 自己 的 状态 
和 UI， 当 状态 发 生变 化 时 ， 会 自动 重新 泻 染 整 个 组 件 ， 多 个 组 件 一 起 协作 共同 构成 了 ReacUS 应 用 。 


2. 组 件 介绍 
我 们 先 从 一 个 简单 的 组 件 开 始 : 


var HelloMessage = React.createClass({ 
render: function() { 
return <div>Hello {this.props.name}</div>; 
} 
]) 
React. render( 
<HelloMessage name="John" />, 
document.getElementById('example') 


) 


这 是 一 个 简单 的 HelloMessage 组 件 ， 其 功能 是 接收 传人 的 用 户 名 称 , 然后 在 页 面 中 显示 Hello 
John。 从 代码 中 可 以 看 到 ， 这 里 主要 用 到 了 React 对 象 ， 以 及 React.createClass 、render 和 
React.Tender 方 法 。 下 面 我 们 来 逐一 解释 一 下 它们 。 


口 React 是 全 局 对 象 ，React]JS 的 所 有 顶层 API 都 挂 在 这 个 对 象 下 。 
口 React.createClass 是 ReactJS 用 来 创建 组 件 类 的 方法 。 
口 render 是 一 个 组 件 级 的 API， 是 React.createClass 内 部 最 常用 的 API， 该 方法 主要 用 来 返 
回 组 件 结构 。 
口 React.render 是 最 基本 的 方法 , 用 于 将 模板 转 为 HTML 语 言 , 并 将 转化 后 的 DOM 结 构 插 人 
到 指定 的 DOM 节 点 上 。 该 方法 的 参数 描述 如 下 : 
ReactComponent render( 
ReactElement element,//ReactJS 组 件 
DOMElement container,// 页 面 中 的 DOM 容 器 
; [function callback]// 插 入 后 的 回调 
如 果 开 头 的 代码 用 文字 描述 的 话 ,， 那 就 是 先 通过 React.createClass 来 创建 一 个 组 件 类 ， 然 
后 调用 render 方 法 输出 组 件 的 DOM 结 构 , 最 后 调用 React .render 将 组 件 搬 和 人 在 id 为 example 
的 节点 上 。 

在 ReacUS 中 ， 从 大 的 分 类 来 看 ， 主 要 分 为 顶层 API〈 即 挂 在 React 对 象 下 的 API ， 如 
React.createClass 、React.render 等 ) 和 组 件 API ( 只 有 组 件 内 部 才 可 以 调用 的 API， 如 Trender )。 
这 里 我 们 只 简单 介绍 了 一 些 基本 常用 的 API， 要 了 解 详细 的 API， 可 以 访问 http:/facebook.github. 
io/react/docs/getting-started.html。 


当 用 React.createClass 创 建 组 件 类 时 , 除了 要 包含 一 个 render 方 法 外 ,也 可 以 包含 组 件 生 命 
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周期 中 的 其 他 方法 。 
下 面 我 们 来 学 习 一 下 组 件 的 生命 周期 。 
3. 组 件 的 生命 周期 
这 里 我 们 通过 构建 一 个 简单 的 列表 组 件 , 来 深入 了 解 组 件 各 环节 的 运作 流程 。 下 面 是 该 列表 2 
组 件 的 详细 代码 : 
var List = React.createClass({ 
//1. 创 建 阶段 
getDefaultProps: function() { 
// 在 创建 类 的 时 候 被 调用 


console.log("getDefaultProps"); 
return {}; 


}, 

//2. 实 例 化 阶段 

getInitialState: function() { 
// 获 取 this.state 的 默认 值 
console.log("geyInitialState"); 
return {}; 


}, 
componentWillMount: function() { 
// 在 fendeT 之 前 调用 此 方法 
// 业 务 逻 辑 的 处 理 都 应 该 放 在 这 里 ， 如 对 state 的 操作 等 
console.log("componentWillMount"); 
}, 
render: function() { 
// 演 染 并 返回 一 个 虚拟 DOM 
console.1log("render"); 
return ( 
<div> hello <strong> {this.props.name} </strong></div> 
); 
}, 
componentDidMount: function() { 
// 该 方法 发 生 在 render 方 法 之 后 。 在 该 方法 中 ，ReactJS 会 使 用 render 方 法 返回 的 虚拟 DOM 对 象 来 创建 真实 的 
//DOM 结 构 
console.1log("componentDidMount"); 


//3. 更 新 阶段 
componentWillRecieveProps: function() { 
// 该 方法 发 生 在 this.props 被 修改 或 父 组 件 调 用 SetProps() 方 法 之 后 
console.1log("componentWillRecieveprops"); 
} 
shouldComponentUpdate: function(){ 
// 是 否 需要 更 新 
console.log("shouldComponentUpdate"); 
return true; 
}, 
componentWillUpdate: function() { 
// 将 要 更 新 
console.log("componentWillUpdate"); 


图 灵 社 区 会 员 蚂 蜂 (240671488@qq.com) 专 享 尊重 版 权 


62 区 第 2 章 React Native 开发 基础 


外 
componentDidUpdate: function() { 


// 更 新 完毕 
console.log("componentDidUpdate"); 


外 
//4. 销 席 阶 段 
componentWillUnmount:function(){ 
// 销 毁 时 被 调用 
console.log("componentWillUnmount"); 
} 
]); 


在 整个 ReactJS 的 生命 周期 中 ， 主 要 会 经 历 这 4 个 阶段 : 创建 阶段 、 实 例 化 阶段 、 更 新 阶段 和 
销毁 阶段 。 

口 创建 阶段 。 该 阶段 主要 发 生 在 创建 组 件 类 的 时 候 ， 即 在 调用 React.createClass 的 时 候 。 
这 个 阶段 只 会 触发 一 个 getDefaultProps 方 法 ,该 方法 会 返回 一 个 对 象 ， 并 缓存 下 来 。 然 
后 与 父 组 件 指定 的 props 对 象 合 并 ， 最 后 赋值 给 this.props 作 为 该 组 件 的 默认 属性 。 
这 里 我 们 说 明 一 下 props。 它 是 一 个 对 象 ， 是 组 件 用 来 接收 外 面 传 来 的 参数 的 ， 组 件 内 部 
是 不 允许 修改 自己 的 props 属 性 的 ， 只 能 通过 父 组 件 来 修改 。 上 面 的 getDefaultProps 方 法 
便 是 处 理 props 的 默认 值 的 。 
实例 化 阶段 。 该 阶段 主要 发 生 在 实例 化 组 件 类 的 时 候 ， 也 就 是 该 组 件 类 被 调用 的 时 候 。 
下 面 我 们 来 实例 化 一 个 List 类 : 
React.render( 


<List name = 'ReactJS' > «</List>, 
document.getElementById("container") 


口 


即 List 组 件 类 被 调用 的 时 候 。 这 个 阶段 会 触发 一 系列 的 流程 ， 具 体 的 执行 顺序 如 下 所 示 。 
(1) getInitialstate。 初始化 组 件 的 state 的 值 , 其 返回 值 会 赋值 给 组 件 的 this.state 属 性 。 
(2) componentNillMount。 根 据 业 务 逻 辑 来 对 state 进 行 相应 的 操作 。 

(3) fender。 根 据 state 的 值 ， 生 成 页 面 需要 的 虚拟 DOM 结 构 ， 并 返回 该 结构 。 


(4) componentDidMount。 对 根据 虚拟 DOM 结 构 而 生成 的 真实 DOM 进 行 相应 的 处 理 ， 组 件 
内 部 可 以 通过 this.getDOMNode() 来 获取 当前 组 件 的 节点 。 然 后 就 可 以 像 在 Web 开 发 中 
那样 操作 里 面 的 DOM 元 素 了 。 

上 面 我 们 提 到 了 几 个 陌生 的 术语 一 一 state 和 虚拟 DOM， 这 里 简要 解释 一 下 它们 。 

state: 它 是 组 件 的 属性 ， 主 要 用 来 存储 组 件 自身 需要 的 数据 。 它 是 可 以 改变 的 ， 它 的 每 

次 改变 都 会 引发 组 件 的 更 新 ， 这 也 是 ReactJS 中 的 关键 点 之 一 。 每 次 数据 的 更 新 都 是 通 
过 修改 state 属 性 的 值 , 然后 ReacUS 内 部 会 监听 state 属 性 的 变化 , 一 旦 发 生变 化 , 就 会 
主动 触发 组 件 的 render 方 法 来 更 新 DOM 结 构 。 
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虚拟 DOM: 它 是 ReacUS 中 提出 的 一 个 概念 ， 是 将 真实 的 DOM 结 构 映 射 成 一 个 JSON 数 据 结 
构 。 

口 更 新 阶段 。 这 主要 发 生 在 用 户 操作 之 后 或 者 父 组 件 有 更 新 的 时 候 ， 此 时 会 根据 用 户 的 操 
作 行 为 进行 相应 的 页 面 结构 的 调整 。 该 阶段 也 会 触发 一 系列 的 流程 ， 具 体 的 执行 顺序 如 
下 所 示 。 

(1) componentWillReceiveProps(object nextProps)。 当 组 件 接收 到 新 的 props 时 ， 会 触发 
该 函数 。 在 该 函数 中 ， 通 常 可 以 调用 this.setState 方 法 来 完成 对 state 的 修改 。 

(2) shouldComponentUpdate(nextProps，nextState)。 该 方法 用 来 拦截 新 的 props 或 state， 
然后 根据 事先 设 定好 的 判断 逻辑 ， 做 出 最 后 要 不 要 更 新 组 件 的 决定 。 

(3) componentWillUpdate(object nextProps, object nextState)。 当 步 骤 (2) 的 shouldCompo- 
nentUpdate 方 法 中 的 拦截 返回 true 的 时 候 , 就 可 以 在 该 方法 中 做 一 些 更 新 之 前 的 操作 。 

(4) render。 根据 一 系列 的 diff 算 法 ,生成 需要 更 新 的 虚拟 DOM 数 据 。 实 践 表 明 ， 在 render 
中 , 最 好 只 做 数据 和 模板 的 组 合 , 不 应 进行 state 等 逻辑 的 修改 , 这 样 组 件 结构 更 清晰 。 


说 明 ” 当 返 回 null 或 者 false 时 ， 表 明 不 需要 演 染 任何 东西 。 


(5) componentDidUpdate。 该 方法 在 组 件 的 更 新 已 经 同步 到 DOM 中 后 触发 ,我们 常 在 该 方 
法 中 做 一 些 DOM 操 作 。 
口 销毁 阶段 。 既 然 说 的 是 生命 ， 那 么 有 生 就 有 死 ， 组 件 也 不 例外 。 这 里 我 们 主要 讲 组 件 死 
的 时 候 会 触发 的 方法 ， 目 前 来 看 只 会 触发 一 个 叫 componentWillUnmount 的 方法 。 当 组 件 需 
要 从 DOM 中 移 除 的 时 候 , 我 们 通常 会 做 一 些 取消 事件 绑 定 、 移 除 虚 拟 DOM 中 对 应 的 组 件 
数据 结构 、 销 毁 一 些 无 效 的 定时 器 等 工作 ， 这 些 事情 都 可 以 在 这 个 方法 中 处 理 。 
4. 组 件 之 间 的 通信 
之 前 已 经 提 到 过 ，ReactJS 的 思想 是 组 件 化 ， 现 在 我 们 便 可 以 尝试 着 做 一 个 简单 的 应 用 。 
先 创 建 一 个 父 类 组 件 Parent， 它 内 部 调用 的 是 一 个 叫 Child 的 子 组 件 ， 并 将 接收 到 的 外 部 参 
数 name 传 递 给 子 组 件 Child。 先 创建 父 类 组 件 Parent: 


var Parent = React.createClass({ 
click:function(){ 
this.refs.child.getDOMNode().style.color="red"; 


render: function() { 


return ( 
<div onClick={this.click}> 
Parent is: 
<Child name = {this.props.name} ref="child"> </Child> 
</div> 
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]); 
然后 创建 子 类 组 件 Child: 
var Child = React.createClass({ 


render: function() { 
return <span> {this.props.name} </span>; 


} 
D; 
最 后 ， 通 过 React.render 方 法 将 组 件 演 染 在 页 面 上 : 


React.render( <Parent name='React' /> ,document.getElementById('container')); 


整个 应 用 的 功能 是 父 组 件 接收 传 入 的 用 户 名 称 , 并 将 用 户 名 称 传 给 子 组 件 , 最 后 再 由 子 组 件 
演 染 出 来 显示 在 页 面 上 


可 以 看 到 , 这 里 组 件 之 间 的 组 合 关系 是 一 层 套 着 一 层 , 就 像 HTML 中 的 DOM 结 构 一 样 , 所 以 
用 ReactJS 开 发 的 应 用 ， 在 组 织 结构 方面 很 清晰 明了 。 


现在 回 到 我 们 的 标题 ， 这 些 组 件 之 间 是 怎么 通信 的 呢 ， 下 面 我 们 从 两 个 方面 来 介绍 一 下 。 


口 子 组 件 调用 父 组 件 的 方法 。 从 上 面 的 代码 中 可 以 看 到 ， 子 组 件 要 拿 到 父 组 件 中 的 属性 , 需 
要 通过 this.props 方 法 。 没 错 ， 就 是 这 个 方法 打通 了 子 组 件 与 父 组 件 的 通信 桥梁 。 所 以 ， 
如 果子 组 件 想 要 调用 父 组 件 的 方法 , 只 需 父 组 件 把 要 被 调用 的 方法 以 属性 的 方式 放 在 子 组 
件 上 , 子 组 件 内 部 便 可 以 通过 “this.props. 被 调用 的 方法 ”这 样 的 方式 来 获得 父 组 件 传 过 来 
的 方法 。 代 码 中 的 this.props.name 便 是 Child 组 件 从 Parent 组 件 拿 到 name 属 性 的 。 然 后 ,每 
次 父 组 件 修 改 了 传人 的 name 属 性 ， 子 组 件 便 会 得 到 通知 ， 然 后 会 自动 获取 新 的 name 属 性 。 
口 父 组 件 调用 子 组 件 的 方法 。 子 组 件 调用 父 组 件 是 通过 props 实 现 ， 那 么 如 何 实现 父 组 件 调 
用 子 组 件 呢 ? 在 ReacUS 中 ,有 个 很 巧妙 的 属性 , 那 就 是 ref。 这 个 属性 就 像 给 组 件 起 个 名 
字 一 样 ， 子 组 件 被 设置 为 ref 之 后 ， 父 组 件 便 可 以 通过 this.ref.xxx 来 获取 到 子 组 件 了 。 
其 中 xxx 为 子 组 件 ref 的 值 。 细 心 的 同学 可 能 很 早 就 注意 到 上 述 代 码 中 的 ref="child" 了 ， 
这 就 是 Parent 组 件 为 了 获取 Child 组 件 而 专门 设置 的 。 上 面 代码 的 意思 是 ， 当 父 组 件 被 点 
击 的 时 候 ， 会 先 获取 子 组 件 元素 ， 然 后 将 子 组 件 元 素 中 的 文字 颜色 改 为 红色 。 
5. 虚拟 DOM 
前 面 我 们 主要 从 大 的 方面 掌握 了 组 件 的 一 些 知识 ， 接 下 来 从 细微 的 组 件 更 新 来 说 说 ReactJS 
的 精妙 之 处 。 说 到 更 新 ，ReactJS 最 大 的 亮点 就 是 Virtual DOM 技 术 。 那 么 ，Virtual DOM 到 底 是 什 
么 呢 ? 之 前 我 们 了 解 到 ， 当 组 件 的 state 属 性 发 生变 化 时 ， 会 自动 执行 组 件 的 fender 方 法 来 实现 
组 件 更 新 。 但 是 如 果真 的 这 样 大 面积 操作 DOM 的 话 ， 性 能 肯定 会 是 一 个 很 大 的 问题 。 然 而 聪明 
的 ReactJS 实 现 了 Virtual DOM 技 术 ， 将 组 件 的 DOM 结 构 映 射 到 这 个 Virtual DOM 对 象 上 ， 并 且 
ReactJS 还 实现 了 一 套 Diff 算 法 。 当 需要 更 新 组 件 的 时 候 ， 会 通过 Diff 算 法 找到 要 变更 的 内 容 。 最 


a 
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后 , 再 把 这 个 修改 更 新 到 实际 的 DOM 节 点 上 。 所 以 , 组 件 更 新 实际 上 不 是 真 的 泻 染 整 个 DOM 树 ， 
而 是 只 更 新 需要 修改 的 DOM 节 点 ， 这 样 在 性 能 上 会 比 原生 DOM 快 很 多 。 


这 样 描述 可 能 有 点 抽象 ， 下 面 看 个 具体 的 例子 。 
假设 我 们 要 创建 一 个 组 件 ， 其 结构 如 下 : 


<U]> 
<1i> 
ctrip 
</1i> 
<1i> 
<U]> 
<1i> 
elong 
</1i> 
</U]> 
</1i> 
</U]> 


通过 前 面 的 学 习 ， 我 们 的 创建 方式 可 能 会 有 下 面 几 种 。 
原生 组 件 的 创建 方式 
用 JSX 实 现 的 代码 如 下 : 


var root = <ul> 
<1i> 
ctrip 
</1i> 
<1i> 
<U]> 
<1i> 
elong 
</1i> 
</U]> 
</1i> 
</ul> 


// 主 要 用 来 输出 虚拟 DOM 结 构 
console.1og(Toot ) ; 


用 JavaScript 实 现 的 代码 如 下 : 


var ctrip = React.createElement('1i', null, 'ctrip'); 

var elong = React.createElement('ul', null, React.createElement('1i', null, 'elong')); 
var root = React.createElement('ul', null, ctrip,elong); 

// 主 要 用 来 输出 虚拟 DOM 结 构 

console.1log(root); 


在 控制 台 捕 获 的 日 志 如 图 2-40 所 示 ， 它 展示 了 ReactJS 对 于 原生 组 件 生成 的 Virtual DOM 的 详 
细 层 次 结构 。 


图 灵 社 区 会 员 蚂 蜂 (240671488@qq.com) 专 享 尊重 版 权 


66 区 第 2 章 React Native 开发 基础 


vObiect {$$typeof: Symbol(react.element), type: "ul", key: null, ref: nulil, props: Obiect..} 
sstypeof: Symbol(react.element) 
owner: null 
self: null 
_source: null 
» store: Obiect 
key: null 
wprops: 0biect 
vchildren: Array[2] 
wg0: 0bject 
$stypeof: Symbol(react.element) 
owner: null 
self: null 
source: null 
» store: Object 
key: null 
wprops: Obiect 
children: "ctrip" 
» proto : Object 
ref: null 
type: "li" 
» proto : Obiect 
v1: Obiect 
sstvoeof: Svmbol{react.element) 
owner: null 
self: null 
source: null 
» store: Obiect 
kev: null 
vprops: Object 
vchildren: Obiect 
sstypeof: Symbol(react.element) 
owner: null 
self: null 
_source: null 
» store: Obiect 
key: null 
vprops: Obiect 
vchildren: Object 
$stypeof: 9ymbotL( react,eLement) 
owner: null 
self: null 
source: null 
* store: Object 
key: null 
vprops: Obiect 
ref: null 
type: "Li 


» proto : Obiect 
ref: null 
type: ”UL 
» proto : Obiect 
e* proto : Object 
ref: null 
type: "li" 
» proto : Obiect 
lenath: 2 
» proto :Array[9] 
» proto : Obiect 
ref: null 
type: "ul” 
* proto : Obiect 


图 2-40 浏览 器 原生 组 件 对 应 的 Virtual DOM 图 


自 定义 组 件 的 创建 方式 
相关 代码 如 下 : 


var Ctrip = React.createClass({ 
render: function() { 
return ( 
<ul> 
<li>ctrip</1i> 
<1i> 
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{this.props.children} 
< 
</ul> 
); 
} 
]); 
var Elong = React.createClass({ 
render: function() { 
return ( 
<U]> 
<li>elong</1i> 
</ul> 
); 
} 
]); 
Var root = <Ctrip><Elong></Elong></Ctrip> 
// 主 要 用 来 输出 虚拟 DOM 结 构 
console.1log(root); 


在 控制 台中 捕获 的 日 志 如 图 2-41 所 示 。 


vObiect {$stypeof: Symbol(react.element), key: nuill, ref: null, props: Object, owner: null..} 
sstypeof: Symbol(react.element 
owner: null 
self: null 
_Ssource: null 
» store: Obiect 
key: null 
vprops: Obiect 
wchildren: Object 
$stypeof: Symbol(react.element) 
owner: null 
self: null 
source: null 
» store: Object 
key: null 


ref: nul 
vtvoe: function (oroos. context. vodater) 

arquments; (,..) 
caller: (,。 
displayName: "Elona" 
lenath: 3 
name: "" 

»prototype: ReactClassComponent 

» proto : function () 


»<function scope> 
» proto : Obiect 
» proto : Object 
ref: null 
vtype: function {arops, context, updater) 
arQuments: we) 
caller: (,..) 
NS: "Ctrio" 
lenath: 3 
name: 
»prototype: ReactClassComponent 
» Droto : function () 
*<function scooe> 
b proto : Obiect 


2-41 ” 自 定义 组 件 对 应 的 Virtual DOM 图 
图 2-41 展 示 ReactJS 对 于 自 定义 组 件 生 成 的 虚拟 DOM 的 详细 层次 结构 。 和 仔细 观察 可 以 发 现 ， 
它 与 图 2-40 的 数据 结构 略 有 不 同 ， 比 如 多 了 displayName 属 性 等 。 


通过 上 面 的 日 志 可 以 看 到 , 不 论 用 哪 种 方式 创建 , 在 控制 台中 输出 的 日 志 都 是 一 个 JavaScript 
对 象 ， 这 就 是 我 们 所 说 的 Virtual DOM 对 象 。 
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接 下 来 ,我 们 看 看 Diff 算 法 在 ReactJS 中 的 体现 。 
首先 ， 使 用 浏览 器 中 Mutation0bserver 的 功能 ， 对 页 面 上 元 素 的 改变 进行 监听 : 


<SCTipt type="text/javascript"> 
var MutationObserver = window.MutationObserver 
|| window.WebKitMutationObserver 
|| window.MozMutationObserver; 
var observeMutationSupport = !!MutationObserver; 
var changedNodes = []; 
if(observeMutationSupport){ 
var observer = new MutationObserver(function(mutations) { 
changedNodes = mutations; 
mutations.forEach(function(mutation) { 
console.log(mutation); 
}) 
)); 
var options = { 
'childList': true,// 子 节点 的 变动 
'attributes':true ,// 属 性 的 变动 
'characterData': true,// 节 点 内 容 或 节点 文本 的 变动 
'subtree' :true ,// 所 有 后 代 节 点 的 变动 
'attribute0ldValue': ttue,// 表 示 观 察 attributes 变 动 时 ， 是 否 需要 记录 变动 前 的 属性 值 
'characterData0ldValue' :true // 表 示 观 察 CharacterData 变 动 时 ， 是 否 需 要 记录 变动 前 的 值 
}; 
observer.observe(document.body, options); 


} 


</script> 
接着 把 ReactJS 组 件 的 生命 周期 做 一 次 封装 ， 便 于 组 件 来 调用 : 


<script type="text/babel"> 
function LifeCycle(name){ 
var obj = { 
name: name 
. 
for(var n in Cycle){ 
obj[n] = Cycle[n]; 


return obj; 
} 
var Cycle = { 
getInitialState: function(){ 
console.1log(this.name, 'getInitialState' ); 
return {}; 
}, 
getDefaultProps: function(){ 
console.1log(this.name, 'getDefaultProps' ); 
return {}; 
}, 
componentWillMount: function(){ 
console.1log(this.name,'componentWillMount' ); 


外 
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componentDidMount: function(){ 
console.log(this.name，componentDidMount ); 
}, 
componentWillReceiveprops: function(){ 
console.log(this.name,'componentWillReceivePprops'); 
}, 
shouldComponentUpdate: function(){ 
console.log(this.name,' shouldComponentUpdate' ); 
return true; 


}, 
componentWillUpdate: function(){ 


console.log(this.name,'componentWillUpdate'); 
}, 
componentDidUpdate: function(){ 
console.1log(this.name,'componentDidUpdate' ); 
}, 
componentWillUnmount: function(){ 
console.1log(this.name,'componentWillUnmount" ); 
} 
}; 


«</script> 
然后 定义 需要 用 到 的 组 件 : 


<script type="text/babel"> 
// 定 义 Ctrip 组 件 
var Ctrip = React.createClass({ 
mixins: [LifeCycle('Ctrip')], 
render: function() { 
console.log('Ctrip','render'); 
return ( 
<U]> 
<li>ctrip</1i> 
<1i> 
<Ul> 
{this.props.children} 
</ul> 
</1i> 
</ul> 
); 
} 
]); 
// 定 义 Elong 组 件 
var Elong = React.createClass({ 
mixins: [LifeCycle('Elong')], 
render: function() { 
console.log('Elong','render'); 
return ( 
<li>elong</1i> 
); 
} 
]); 
// 定 义 Qunar 组 件 
var Qunar = React.createClass({ 
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mixins: [LifeCycle('Qunar')], 

render: function() { 
console.1log('Qunar', 'render'); 
return ( 

<1i>qunar</1i> 

); 
} 

}); 

// 定 义 Ly 组 件 

var Ly = React.createClass({ 
mixins: [LifeCycle('Ly')], 
render: function() { 

console.log('Ly', 'render'); 


return ( 
<1i>ly</1i> 
); 
} 
]); 
</SCTipt> 
最 后 ， 定 义 我 们 的 主 逻 辑 : 
// 实 现 主 逻辑 
console.1log('----- 条 下 Se '); 


ReactDOM. render( 
<Ctrip><Elong></Elong><Qunar></Qunar></Ctrip>, 
document.getElementById('container') 


和 
setTimeout(function(){ 

console.log('----- second------------ “3 

ReactDOM. render( 
<Ctrip><Elong></Elong><Ly></Ly><Qunar></Qunar></Ctrip>, 
document .getElementById('container') 
); 


},1000) 

为 了 能 够 更 好 地 验证 ReactJS 的 Diff 算 法 ,我们 借助 了 ReactJS 的 组 件 生命 周期 和 浏览 器 的 
MutationObserver 功 能 。 通 过 组 件 的 生命 周期 ， 我 们 能 够 很 直观 地 看 到 Diff 算 法 的 体现 ; 通过 
MutationObserver 功 能 ， 我们 又 能 很 好 地 验证 组 件 生命 周期 的 正确 性 。 上 面 代 码 的 逻辑 实现 的 效 
果 其 实 就 是 在 Elong 和 Qunar 这 两 个 组 件 之 间 插 入 一 个 Ly 组 件 ， 从 结构 变化 上 来 看 应 该 是 如 下 的 
样子 © 

一 开始 的 结构 如 下 : 

<U]> 

<1i> 
ctrip 

</1i> 

<li> 


<U]> 
<1i> 
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elong 
</1i> 
<1i> 
qunar 
</1i> 
</U]> 
</1i> 
</ul> 


1 秒 之 后 的 结构 如 下 : 


<ul> 
<1i> 
ctrip 
</1i> 
<1i> 
<U]> 


常规 的 做 法 就 是 将 Elong 和 Qunar 组 件 先 删除 ， 然 后 依次 创建 和 插入 Elong、Ly 和 Qunar 组 件 。 
现在 我 们 来 看 看 ReactJS 是 怎么 做 的 呢 ， 我 们 通过 在 浏览 器 的 控制 台中 进行 捕获 ， 看 到 的 日 
志 如 图 2-42 所 示 。 
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Ctrip componentWillReceiveProps 
Ctrip shouLdComponentUpdate 
Ctrip componentWillUpdate 

Ctrip render 

Elorg componentWillReceiverrops 
ELong shouldComponentUpdate 
Elorg componentWillUpdate 
Elorg render 

Qunar componentWilllinmount 

Ly cetlnitialState 

Ly componentWillMount 

Ly render 

Qunar getinitialState 

Qunar componentWillMount 

Qunar render 

Elorg componentDidUpdate 

Ly componentDidHMount 

Qunar componentDidMount 

Ctrip componentDidljpdate 


7 f{} 
edNodes: Nodel st [0] 
at triboteName 1 
Ba tr1DUtENBMES pace: null 


notblina; ee 
» Brevioueeibl i 
» renovedoges: "Ridaiist [1] 
»taraet: Ul 
Vper. Ll 
: LLStionRecord 
MutationAecorg f} 
dedNodes: Nodel st IL] 
ax ceb teName: null 
aitr riDUt eName pace; null 
next2tblinog:; null 


oldVvalue Din 
bp previoy 和 
» Penyved li ngaetist 19] 
»tarnpt: UL 
type: ichitdtis 
* Droto : 由 起 HionRacord 


“MutationRecorg 了 
raddedNodes:; NodeList[1] 
aitributeName: null 
aitributeNamespace:; null 
nextatolina; null 
oldVvalue: mee 

» oreviousSiblina: li 

» removedNoges: "NegeList [2] 


“epee chigList 
» nrnto : HtStionRecord 


” chargedNodes[08][{"removedNodes"] 

[ <li data-reactid=",0.1.0.1">qunar</1i>] 
» chargedNodes[1]["addedNodes"] 

[ <li data-reactid=",0.1.0.1">ly</1i>] 
" chargedNodes[2]["addedNodes"] 

[ <li data-reactid-".08.1.0.2"~qunar</li~] 


> 


图 2-42 ”Diff 算 法 在 组 件 生命 周期 中 的 体现 图 


从 日 志 中 可 以 看 出 ,，ReactJS 的 Diff 算 法 的 结果 是 , Elong 组 件 不 变 , 先 将 Qunar 组 件 进 行 删除 ， 
然后 再 创建 并 插入 Ly 组 件 ， 最 后 再 创建 并 插入 Qunar 组 件 。 可 见 ， 这 比 我 们 常规 的 做 法 省 去 了 对 
Elong 组 件 的 删除 操作 。 这 样 其 实 并 没有 将 Diff 算 法 的 作用 发 挥 到 极致 。 下 面 我 们 再 将 主 逻 辑 代 码 
稍 作 调 整 : 


console.log('----- first------------ 办 站 
ReactDOM. render( 
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<Ctrip><Elong key="Elong"></Elong><Qunar key="Qunar"></Qunar></Ctrip>, 
document.getElementById('container') 


); 
setTimeout(function(){ 
console.log('----- second------------ 的 
ReactDOM. render( 
<Ctrip><Elong key="Elong"></Elong><Lly key="Ly"></Ly><Qunar key="Qunar"></Qunar></Ctrip>, [| 
document .getElementById( "container ) 
) ; 
}, 1000) 


从 代码 中 可 以 看 到 ,主要 的 修改 就 是 给 每 个 组 件 加 了 一 个 key 属 性 ， 此 时 再 来 运行 一 下 代码 ， 
在 控制 台中 看 到 的 日 志 如 图 2-43 所 示 。 


Ctrip componentWillReceiveProps 
Ctrip shouldComponentUpdate 
Ctrip componentWillUpdate 

Ctrip render 

Elong componentWillReceiveProps 
Elong shouldComponentUpdate 
Elong componentWillUpdate 

Elong render 

Qunar componentWillReceiveProps 
Qunar shouldComponentUpdate 
Qunar componentWillUpdate 

Qunar render 

Ly getInitialState 

Ly componentWiLUMount 

Ly render 

Elong componentDidUpdate 

Qunar componentDidUpdate 

Ly componentDidMount 

Ctrip componentDidUpdate 


vMutationRecord {} 
vaddedNodes: NodeList[1] 


__proto__ : NodeList 
attributeNine: null 
attributeNamespace: null 
»nextSibling: li 

oldValue: null 
»previousSibling: li 
» removedNodes: NodeList [0] 
»target: ul 

type: "childList" 
» proto : MutationRecord 

> changedNodes [8] ["addedNodes"] 


[ <li data-reactid=".0.1.0.$Ly">ly</1li>] 
图 2-43 ”Diff 算 法 在 添加 Key 属性 的 组 件 生命 周期 中 的 体现 图 
可 以 看 出 , 这 次 的 Di 算法 与 之 前 有 很 大 的 不 同 。 这 次 算法 的 结果 是 , Elong 组 件 不 变 , Qunar 
组 件 不 变 ， 只 是 在 Qunar 组 件 之 前 创建 并 插入 了 Ly 组 件 。 


上 面 便 是 我 们 对 Virtual DOM 和 Diff 算 法 的 一 些 简单 使 用 和 分 析 , 如 果 大 家 还 想 更 深入 地 了 解 
Virtual DOM 和 Diff 算 法 ， 可 以 去 看 http://calendar.perfplanet.com/2013/diff/ 这 篇 文章 ， 里 面 有 详细 
的 讲解 。 
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6. 实战 


这 里 我 们 还 是 以 上 一 节 中 的 BoxApp 为 例 进 行 介绍 , 首先 看 一 下 它 的 JSX 实 现 。 这 里 的 运行 环 


境 是 iPhone 6 Plus。 


下 面 还 是 以 创建 一 个 容器 壳 开 始 ， 首 先 介绍 一 下 HTML5 中 的 主要 代码 实现 。 


HTML 代 码 如 下 : 


<div id="container"></div> 


<script src="./build/react-with-addons-0.13.3.js"></script> 
<script src="./build/JSXTransformer-0.13.3.js"></script> 


CSS 代 码 如 下 : 


.height50 { 
height: 50px; 


.height400 { 

height: 400px; 
} 
.width400 { 

width: 400px; 
} 
.bgred { 

background-color: #6AC5AC; 
} 
.box { 

display: flex; 
flex-direction: column; 
flex: 1; 
position: relative; 
color:#FDC72F; 
line-height: 1enm; 
} 
.label { 
top: 0; 
Left: 0 
padding: 0 3px 3px 0; 
position: absolute; 
background-color: #FDC72F; 
color: white; 
line-height: 1em; 


} 
.top { 

width: 100%; 
justify-content: center; 
display: flex; 
align-items: center; 


.bottom { 
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width: 100%; 

display: flex; 
justify-content: center; 
align-items: center; 

} 
.right{ 
width: 50px; 

display: flex; 
justify-content: space-around; 
align-items: center; 


} 
.left { 

width: 50px; 

display: flex; 
justify-content: space-around; 
align-items: center; 


} 
.margginBox { 


position:absolute; 
top: 100px; 

padding-left:7px; 
padding-right:7px; 


} 


.borderBox { 
flex: 1; 
display: flex; 
justify-content: space-between; 


} 
JSX 代 码 如 下 : 


var Box = React.createClass({ 
render:function(){ 


var paren 


tClass = "box "+this.props.width+ 


+ this.props.height,; 


var topClass = "top height50 "+ 
var leftClass = 


this.props.classBg; 


"left "+this.props.classBg; 


var rightClass = "right "+this.props.classBg; 


var bottomClass = "bottom heigh 


t50 "+this.props.classBg; 


return ( 
<span className= {parentClass}> 
<span className="label">{this.props.boxName}</span> 
<span className={topClass}>top</span> 
<span className={this.props.childName}> 
<span className={leftClass}>left</span> 
{this.props.children} 
<span className={rightClass}>right</span> 
</span> 
<span className={bottomClass}>bottom</span> 
</span> 
) 
} 


]) 


var MargginBox = React.createClass({ 
render:function(){ 
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return ( 
<span className="margginBox"> 
<Box childName="borderBox" height="height400" width="width400" 


boxName="margin" classBg="bgred">{this.props.children}</Box> 
</span> 


) 
}) 
var BoxContainer = React.createClass({ 
render: function(){ 
return ( 
<MargginBox></MargginBox> 
) 
} 
}) 


React.render(<BoxContainer/> ,document.getElementById("container")); 


运行 效果 如 图 2-44 所 示 。 


图 2-44 BoxApp 之 MarginBox 容 器 图 


下 面 我 们 分 析 一 下 JSX 中 的 主要 代码 ， 这 次 从 下 往 上 看 ， 这 样 逻 辑 会 更 加 清晰 。 


口 在 BoxContainer 组 件 内 部 ， 只 调用 了 MargginBox 组 件 。 


口 最 下 面 是 调用 React.render 方 法 将 BoxContainer 组 件 泻 染 到 ID 为 container 的 容器 上 。 


口 MargginBox 组 件 主要 是 调用 Box 组 件 ,将 height 、width 、boxName 等 值 ， 以 属性 的 方式 传递 


给 Box 组 件 。 要 注意 的 一 句 代 码 是 {this.props.children}， 它 会 将 MargginBox 内 部 的 子 组 


件 全 部 泻 染 出 来 。 


口 在 Box 组 件 中 , 通过 this.props 来 接收 MargginBox 组 件 传 来 的 参数 , 通过 className 来 给 元 
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素 设 置 样式 。 这 里 也 要 强调 一 下 {this.props.children}, 这 样 Box 组 件 就 会 把 上 面 提 到 的 
MargginBox 内 部 的 子 组 件 全 部 泻 染 到 这 里 来 。 


全 部 代码 可 以 在 后 面 的 案例 代码 库 中 下 载 ， 完 整 的 效果 图 如 图 2-45 所 示 。 


botitormm 


图 2-4$ ”BoxApp 界 面 图 


2.2.3 JSX 实战 之 React Native 


前 面 提 到 过 ，React Native 是 ReactJS 思 想 在 Native 上 的 实现 ， 也 是 通过 组 件 化 来 构建 应 用 的 ， 
而 且 组 件 的 生命 周期 和 ReactJS 中 的 生命 周期 完全 一 样 。 不 同 的 是 ，React Native 中 没有 DOM 的 概 
念 ， 只 有 组 件 的 概念 ， 所 以 我 们 在 ReactJS 中 使 用 的 HTML 标 签 以 及 对 DOM 的 操作 在 这 里 是 用 不 
了 的 。 但 是 JSX 的 语法 、 事 件 绑 定 、 自 定义 属性 等 这 些 特性 , 在 React Native 和 ReactJS 中 是 一 样 的 。 
下 面 我 们 看 看 如 何在 React Native 中 实现 上 面 的 MarginBox 容 器 ， 相 关 的 JavaScript 代 码 如 下 : 


Var React = require('react-native'); 
var { 
AppRegistry, 
StyleSheet, 
Text， 
View, 
} = React; 
var BoxStyles = StyleSheet.create({ 
"height50": { 
height: 50， 


】， 
"height400": { 
height: 400， 
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}, 

"width400": { 
width: 400, 

]， 

"bgred": { 
backgroundColor: "#6AC5AC", 

}， 

"box": { 
flexDirection: "column", 
flex: 1， 
position: "relative", 

}, 

"label": { 
top: 0， 
left: 0， 
paddingTop: 0， 
paddingRight: 3， 
paddingBottom: 3, 
paddingLeft: 0， 
position: "absolute", 
backgroundColor: "#FDC72F", 


]， 

"top": { 
justifyContent: "center", 
alignItems: "center", 

]， 

"bottom": { 


justifyContent: "center", 
alignItems: "center", 


"right": { 

width: 50， 

justifyContent: "space-around", 
lignItems: "center", 


oo 


]， 
"Left, 1 

width: 50， 

justifyContent: "space-around", 
alignItems: "center", 


}, 
"margginBox":{ 
"position": "absolute", 
"top": 100, 
"paddingLeft":7, 
"paddingRight":7, 
} 
}) 
var Box = React.createClass({ 
render: function(){ 
return ( 
<View style={[BoxStyles.box,BoxStyles[this.props.width], 
BoxStyles[this.props.height]]}> 
<View style={[BoxStyles.top,BoxStyles.height50,BoxStyles[this.props.classBg]]}> 
<Text>top</Text></View> 
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<View style={[BoxStyles[this.props.childName]]}> 
<View style={[BoxStyles.left,BoxSstyles[this.props.classBg]]}> 
<Text>left</Text></View> 
{this.props.children} 
<View style={[BoxStyles.right,BoxStyles[this.props.classBg]]}> 
<Text>right</Text></View> 
</View> 
<View style={[BoxStyles.bottom,BoxStyles.height50, 
BoxStyles[this.props.classBg]]}><Text>bottom</Text></View> 
<View style={[BoxStyles.1label]}><Text>{this.props.boxName}</Text></View> 
</View> 
) 
} 
]) 


var MargginBox = React.createClass({ 
render:function(){ 
return ( 
<View style={[BoxStyles.margginBox]}> 
<Box childName="borderBox" height="height400" width="width400" 
boxName="margin" classBg="bgred">{this.props.children}</Box> 
</View> 
) 
} 
]) 


var BoxContainer = React.createClass({ 
render:function(){ 
return ( 
<MargginBox> 
</MargginBox> 
) 
} 
]) 


AppRegistry.registerComponent('Box', () => BoxContainer); 

下 面 我 们 来 分 析 一 下 上 面 的 代码 。 

口 通过 require 导 人 人 react-native 类 库 ， 并 赋值 给 React 变 量 。 

口 从 React 变 量 导出 我 们 需要 的 变量 ， 如 AppRegistry ( 用 于 注册 组 件 )、StyleSheet ( 用 于 

创建 样式 )、Text (文本 组 件 ， 显 示 文 字 时 使 用 )、Vview ( 视图 组 件 ， 相 当 于 HTML5 中 的 

div ) 等 。 

口 通过 StyleSheet .create 的 方式 创建 BoxSstyles 样 式 实例 。 创 建 的 时 候 ， 需 要 我 们 把 事先 定 

义 好 的 JavaScript 对 象 传人 ， 在 这 个 JavaScript 对 象 中 实现 我 们 对 样式 的 定义 。 

口 通过 React.createClass 的 方式 定义 组 件 类 。 这 里 我 们 定义 了 Box 、MargginBox 和 
BoxContainer 这 3 个 组 件 ， 其 中 Box 组 件 是 核心 ， 界面 上 显示 的 top、left、bottom、right 
等 值 都 是 在 这 个 组 件 里 面 实现 的 。 

口 将 容器 组 件 BoxContainer 通 过 AppRegistry.registerComponent 的 方式 注册 到 容器 上 。 


上 面 简单 介绍 了 MarginBox 容 需 在 React Native 中 的 实现 。 关 于 整个 案例 的 全 部 代码 ， 可 以 在 
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后 面 的 案例 代码 库 中 下 载 到 。 


2.3 React Native 开发 向 导 


通过 前 面 的 学 习 ， 我 们 已 经 掌握 了 开发 React Native 应 用 的 基础 知识 。 但 是 在 开发 流程 方面 
还 是 一 头 雾 水 ， 比 如 不 知道 如 何 构建 应 用 、 如 何 调试 应 用 、 如 何 打包 应 用 等 。 接 下 来 我 们 就 基于 
这 些 内 容 ， 以 前 面 用 到 的 BoxApp 为 主线 ， 整 体 了 解 和 学 习 一 下 构建 应 用 的 全 过 程 。 


2.3.1 配置 文件 


这 里 我 们 基于 iOS 上 的 React Native 来 创建 BoxApp 应 用 。 
首先 ， 要 确保 电脑 上 已 经 安装 了 React Native 的 命令 行 工具 ， 如 果 没 有 ， 可 以 执行 下 面 的 代码 : 


npm install -g react-native-cli 


这 样 一 来 命令 行 工 具 就 安装 好 了 。 从 代码 中 可 以 看 到 ， 它 用 的 是 Nodejs 提 供 的 包 管 理工 具 
NPM 来 安装 的 。 可 见 ，React Native 的 命令 行 工具 其 实 就 是 Node,js 的 一 个 模块 。 关 于 Node.js 的 用 
法 ， 可 以 参考 https://modejs.org/en/。 安 装 完 命令 行 工 具 后 ， 就 会 有 一 个 全 局 的 react-native 命 令 
可 以 使 用 。 

接 下 来 ， 我 们 使 用 这 个 命令 行 工具 来 创建 BoxApp 应 用 。 在 开发 目录 下 ， 运 行 下 面 的 代码 ; 

Teact-native init Box 


这 段 代码 的 大 概 执行 流程 是 先 获 取 React Native 的 源码 和 依赖 包 ， 然 后 在 当前 目录 下 创建 一 
个 名 叫 Box 的 Xcode 项 目 ， 这 样 就 创建 好 了 BoxApp 应 用 。 如 果 创 建 不 成 功 ， 可 能 是 react-native 
的 地 址 访问 不 了 啦 。 如 果 已 经 安装 过 淘宝 的 cnpm 的 话 ,可 以 通过 淘宝 的 cnpm 来 安装 react-native， 
此 时 需要 找到 文件 /usr/1local/1ib/node modules/react-native-cli/index.js， 将 其 中 的 


run('npm install --save react-native', function(e) { 
修改 为 : 
run('cnpm install --save react-native', function(e) { 


当然 ， 如 果 不 想 每 次 都 重新 获取 最 新 的 react-native 代 码 ， 也 可 以 指定 一 个 在 自己 电脑 上 已 经 
安装 好 的 reactnative 的 路 径 ， 然 后 创建 一 条 复制 命令 替代 掉 上 面 的 命令 。 


接 下 来 运行 cd Box/ 命 令 ， 进 入 Box 目 录 ， 此 时 会 看 到 如 网 2-46 所 示 的 代码 结构 。 
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pb android 
mq index.android.js 
a index.ios.js 
了 ios 


a 


Box 
h AppDelegate.h 
m AppDelegate.m 


p Base.lproj 
Pp Images.xcassets 
Info.plist 
m main.m 


国 Box.xcodeproj 
pb 四 BoxTests 
main.jsbundle 
pb node_modules 


4 package.json 
图 2-46 Box 目录 结构 


虽然 这 里 有 很 多 文件 会 被 自动 创建 出 来 ， 但 是 需要 修改 的 只 有 两 个 文件 一 一 AppDelegate.m 
和 index.iosjs。 下 面 我 们 具体 介绍 一 下 这 两 个 文件 。 


口 AppDelegate.m。 这 是 应 用 程序 人 口 文件 中 被 调用 到 的 文件 。 打 开 该 文件 , 会 看 到 下 面 的 
代码 : 


jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"]; 


这 行 代码 的 意思 是 将 jsCcodeLocation 变 量 赋值 为 http://localhost:8081/index.ios. 
bundle。 当 应 用 启动 运行 的 时 候 , 会 自动 拉 取 这 个 bundle 文 件 ,该 文件 里 存放 的 是 应 用 的 
全 部 逻辑 代码 。 我 们 并 没有 在 目录 中 找到 这 个 文件 ， 那 它 是 怎么 来 的 呢 ? 事 实 上 ， 这 个 
地 址 只 是 一 个 请 求 地 址 ， 而 非 真 正 的 静态 资源 文件 地 址 。 那 么 ， 这 个 地 址 返回 的 内 容 是 
从 哪里 来 的 呢 。 我 们 带 着 疑问 来 继续 往 下 学 习 。 

D index.ios.js。 这 是 开发 人 员 编 写 代码 的 入 口 ， 项 目 中 涉及 的 业务 组 件 的 定义 以 及 组 件 之 
间 的 艇 套 都 会 在 这 里 得 到 体现 。 我 们 在 项 目的 根 目录 下 找到 这 个 文件 ， 用 编辑 器 打开 ， 
会 看 到 里 面 已 经 默认 写 了 一 些 代 码 ， 这 是 React Native 自 动 生成 的 代码 架构 ， 是 可 以 正常 
运行 的 ， 有 兴趣 的 同学 可 以 一 试 ， 效 果 图 如 图 2-47 所 示 。 


图 灵 社 区 会 员 蚂 蜂 (240671488@qq.com) 专 享 尊重 版 权 


82 区 第 2 章 React Native 开发 基础 


Carrier 令 5:33 PM 


Welcome to React Nativel 


To get started, edit index.ios.js 


Press Cmd+R to reload, 
Cmd+D or shake for dev menu 


图 2-47 ”React Native 项 目 默 认 效 果 


下 面 我 们 来 分 析 下 这 段 代码 : 


/** 
* Sample React Native App 
* https://github.com/facebook/react-native 
#7 
"Use strict'; 
Var React = require('react-native'); 
var { 
AppRegistry, 
StyleSheet, 
Text， 
View, 
} = React; 
var styles = StyleSheet.create({ 
container: { 
flex: 1， 
justifyContent: “centeT ， 
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alignItems: “Center ， 
backgroundColor: '#F5FCFF', 


instructions: { 
textAlign: 'center', 
color: '#333333', 
marginBottom: 5, 


}, 
]); @ 
var Box = React.createClass({ © 
render: function() { 
return ( 
<View style={styles.container}> 
<Text style={styles.welcome}> 
Welcome to React Nativel 
</Text> 
<Text style={styles.instructions}> 
To get started, edit index.ios.js 
</Text> 
<Text style={styles.instructions}> 
Press Cmd+R to reload,{'\n'} 
Cmd+D or shake for dev menu 
</Text> 
</View> 
); 
} 
)); © 
AppRegistry.registerComponent('Box', () => Box); © 


代码 的 大 体 结构 如 下 所 示 。 

(1) 引入 React Native 包 ， 并 导出 需要 用 到 的 变量 ， 相 关 代码 详 见 第 小 -2 行 。 

(2) 创建 App 需 要 的 样式 类 styles， 相 关 代码 见 第 @~@ 行 。 

(3) 创建 App 的 逻辑 组 件 Box ， 并 使 用 样式 类 styles 中 的 样式 ， 相 关 代码 见 第 @~(@ 行 。 
(4) 最 后 将 App 组 件 Box 泻 染 到 容器 中 ， 相 关 代码 见 第 CO 行 。 


接 下 来 我 们 要 做 的 就 是 在 这 个 架构 的 基础 上 添加 BoxApp 需 要 的 逻辑 代码 ， 这 时 可 以 直接 复 
制 2.2 节 的 代码 过 来 。 至 此 ， 我 们 的 代码 已 经 准备 就 绪 ， 接 下 来 就 是 让 BoxApp 运 行 起 来 了 。 


2.3.2 ”运行 
要 让 BoxApp 运 行 起 来 ， 其 中 涉及 编译 、 打 包 、 启 动 服 务 等 ， 大 体 流程 如 下 所 示 。 
(1) 进入 运行 日 录 ， 相 关 命 令 如 下 : 


图 灵 社 区 会 员 蚂 蜂 (240671488@qq.com) 专 享 尊重 版 权 


84 区 第 2 章 React Native 开发 基础 


cd BoxV/i09 

(2) 打开 文件 Box.xcodeproj。 双 击 该 文件 ， 便 会 自动 打开 Xcode 编 辑 器 ， 然 后 选择 好 模拟 器 类 
型 ， 这 里 选择 iPhone 6 Plus。 

(3) 点 击 “ 运 行 ”按钮 ， 也 可 以 使 用 快捷 键 s+R ， 便 会 触发 Xcode 的 编译 功能 ， 待 Xcode 编 译 
成 功 后 ， 会 提示 Build Succeeded。 知 失败 ， 则 会 提示 Build Failed， 同 时 会 输出 错误 日 志 。 

(4) 启动 包 服务 器 。 

接 下 来 我 们 会 看 到 ，Xcode 会 自动 启动 我 们 的 命令 行 终端 ， 我 们 把 这 个 终端 称 为 “packager 
终端 "， 并 在 项 目的 根 目录 下 执行 如 下 命令 : 

npm start 


这 个 命令 用 于 执行 Node.js 启 动 服务 ， 启 动 成 功 后 就 会 在 终端 输出 成 功 的 日 志 : 


1 
Running packager on port 8081. 


I 

| 

| 

| Keep this packager running while developing on any JS projects. Feel 
| free to close this tab and run your own packager instance if you 
| 

| 

1 


prefer. 


https://github.com/facebook/react-native 


Looking for JS files in 
/Users/username/Developer/ReactNative/Box 


React packager ready. 


当然 ,也 经 常会 遇 到 启动 失败 的 情况 ,常见 的 原因 是 端口 被 占用 了 。 这 有 可 能 是 上 个 终端 启 
动 后 没有 关闭 导致 的 ， 所 以 在 用 Xcode 编译 应 用 前 ， 尺 量 将 所 有 终端 都 关闭 ， 以 免 带 来 不 必要 的 
麻烦 。 在 应 用 编译 的 过 程 中 ，Xcode 会 自动 开启 需要 的 终端 ， 也 就 是 上 面 的 “packager 终 端 "。 注 
意 这 个 终端 在 应 用 的 调试 中 要 一 直 保 持 开 着 ， 直 到 Xcode 需要 重新 编译 时 再 把 它 关 掉 。 我 们 上 面 
讲 到 的 http://localhost:8081/index.ios.bundle 之 所 以 能 够 访问 ， 靠 的 就 是 这 个 服务 通过 动态 分 析 
index.io.js 中 的 依赖 , 并 对 其 进行 合并 得 到 的 。 而 且 该 服务 还 有 个 好 处 就 是 允许 代码 实时 泻 染 。 这 
样 我 们 修改 了 JavaScript 文 件 的 代码 ， 就 不 需要 重新 通过 Xcode 编 译 也 能 看 到 效果 。 

(5) 启动 模拟 需 。 


启动 包 服务 器 后 ，Xcode 便 会 自动 启动 我 们 配置 好 的 模拟 器 ， 待 模拟 器 成 功 启 动 后 ， 就 可 以 
看 到 BoxApp 的 页 面 了 。 修 改 代码 之 后 ， 只 需要 在 模拟 器 上 按 快捷 键 8x+R 即 可 看 到 最 新 的 效果 了 。 
有 时 候 我 们 觉得 模拟 咒 太 大 啦 ， 此 时 也 可 以 通过 选择 Simulator 一 Window 一 Scale 来 调整 模拟 需 窒 
口 的 大 小 。 
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(6) 修改 端口 。 
包 服 务 器 默认 的 启动 端口 为 8081, 如 果 与 现 有 的 服务 器 端口 有 冲突 的 话 , 可 以 将 其 改 为 自己 
想 要 的 端口 。 不 过 需要 注意 的 是 ， 要 同时 修改 下 面 几 个 地 方 。 


口 包 服 务 器 启动 时 监听 的 端口 。 在 文件 Box/mode_modules/react-native/packager/packager.js 中 2 
找到 下 面 的 代码 : 


var options = parseCommandLine([{ 
command: 'port', 
default: 8081， 
type: 'string', 


然后 将 8081 改 为 需要 的 端口 。 
口 应 用 程序 启动 时 ， 读 取 所 有 逻辑 代码 的 地 址 。 在 文件 Box/ios/Box/AppDelegate.m 中 找到 下 
面 的 代码 : 
jsCodeLocation = [NSURL URLWithSstring:@"http://localhost:8081/index.ios.bundle"]; 
然后 将 8081 修 改 为 需要 的 端口 。 


口 WebSocket 监 听 的 端口 ,在 文 什 Box/node_modules/react-native/Libraries/WebSocket/RCTWeb 
SocketExecutorm 中 找到 下 面 的 代码 : 


- (instancetype)init 
{ 
return [self initNithURL:[RCTConvert NSURL:@"http://localhost:8081/debugger-proxy" ]]; 


} 
然后 将 8081 改 为 需要 的 端口 。 


2.3.3 ”调试 

在 上 面 的 模拟 器 中 , 我 们 的 逻辑 JavaScript 文 件 是 服务 端 包 服 务 器 动态 编译 出 来 的 , 不 是 实际 
存在 的 静态 文件 。 当 需要 调试 的 时 候 , 该 怎么 办 呢 ? 在 模拟 器 上 按 快捷 键 %8+D, 就 会 弹出 如 图 2-48 
所 示 的 调试 菜单 。 
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iPhone 6s Plus - iPhone 6s Plus / i... 


React Native: Development 
Reload 


Debug in Chrome 


Debug in Safari 


Show FPS Monitor 
Inspect Element 
Enable Live Reload 


Start Profiling 


Cancel 


图 2-48 ”React Native Debug 界 面 

下 面 我 们 逐一 了 解 这 些 调试 功能 。 

口 Reload。 相 当 于 刷新 页 面 ， 快 捷 键 为 XR+R。 需 要 注意 的 是 ， 如 果 你 新 增 了 文件 或 者 修改 
了 Native 代 码 ， 需 要 使 用 Xcode 重新 编译 应 用 ， 而 不 是 刷新 页 面 。 只 有 修改 的 是 JavaScript 
文件 时 ， 刷 新 功能 才 起 效果 。 

口 Debug in Chrome。 该 功能 允许 开发 人 员 在 Chrome 中 调试 应 用 ， 其 调试 方式 和 调试 Web 
应 用 一 样 。 当 该 功能 被 点 击 时 ，React Native 会 启动 Chrome 浏 览 器 ， 并 且 打 开 一 个 
http://localhost:8081/debugger-ui 的 新 标签 。 在 这 个 标签 中 , 打开 开发 者 工具 , 选择 Console， 
就 可 以 看 到 输出 的 日 志 信息 ， 如 图 2-49 所 示 。 
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€ GG localhost:8081/debugger-ui ?| 三 
Q [DD Eements |'Console|» | 黎 加 |Xx 
React Native JS code © 可 <top frame> v Preserve log 
runs inside this Chrome Running application "Box" AppRegistry.is:75 
tab. with appParams: {"rootTag":1,"initialProps": 
{}}. _DEV_ === true, development-level 
a warning are ON, performance optimizations are 
Press to open OFF 
Developer Tools. Enable > 


Pause On Caught 
Exceptions for a better 
debugging experience. 


Status: Debugger 
session #13089 active. 


图 2-49 ”Console 调 试 界面 


这 里 我 们 也 可 以 调试 JavaScript 代 码 。 打 开 Sources ， 选 择 localhost:8081 下 的 
index.ios.bundle 文 件 并 点 击 ， 此 时 在 右 侧 便 可 以 看 到 动态 合并 好 的 代码 ， 如 图 2-50 所 示 。 
当然 ， 也 可 以 给 它 添加 断 点 来 调试 。 


Q 日 Elements ” Network JSourcesl Timeline Profiles » > 尝 国 Xx 


Sour... Cont... Snip... | [4] debugger-ui index.ios.bundle require.js x » 


A 和 488 dependencyMapldep] || (dependencyMapldep] = 1 
v © localhost:8081 489 dependencyMap [dep] [module.id] = 1; 
P| jUsers/wagon/Deve 490 } 


悦 RunMainModulejs| 491 } 
492 


全 erggersull 493 function _initDependencies(id) { 
2 index.ios.bundle ET7D var modulesToRequire = []; 


495 var module = modulesMap[id]; 

496 var dep, i, subdep; 

497 

Aa .* | ~ YY Replace 


-二 | 


图 2-50 ”Sources 中 的 Debug 界 面 


口 Debug in Safari。 该 功能 同 Debug in Chrome 类 似 ， 这 里 就 不 歼 述 了 

口 Live Reload。 该 功能 主要 用 来 实现 自动 刷新 ， 当 我 们 点 击 Enable Live Reload 时 ， 如 果 应 
用 中 的 JavaScript 代 码 有 任何 修改 ,， 它 都 会 自动 帮 有 我 们 更 新 ,不 需要 人 为 去 操作 刷新 功能 。 
当然 ， 也 可 以 通过 点 击 Disable Live Reload 来 禁用 该 功能 。 


口 Show FPS Monitor。 该 功能 是 用 来 对 UI 和 JavaScript 的 FPS 的 监控 ， 其 效果 如 图 2-51 所 示 。 


[ UI ] 
60 FPS 
(60 - 60) 


图 2-51 ”FPS Monitor 界 面 
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说 明 FPS 是 图 像 领域 中 的 定义 , 是 指 画面 每 秒 传输 的 帧 数 ， 通 俗 来 讲 就 是 指 动画 或 视频 的 画面 
数 。FPS 是 测量 用 于 保存 、 显 示 动 态 视频 的 信息 数量 。 每 秒 钟 的 帧 数 愈 多 ， 所 显示 的 动作 
就 会 愈 流畅 。 通 常 ， 要 避免 动作 不 流畅 的 最 低 帧 数 是 30。 某 些 计 算 机 视频 格式 ， 每 秒 只 
能 提供 15 帧 。 


口 Inspect Element。 做 过 Web 开 发 的 人 员 应 该 都 用 过 Chrome 的 查找 元 素 功 能 ， 它 可 以 帮 有 我 
们 很 方便 地 发 现 当 前 元 素 的 位 置 、 样 式 、 层 级 关系 等 , 是 Web 开 发 中 不 可 缺少 的 一 个 功能 。 
这 里 我 真 佩服 Facebook 的 强大 ， 现 在 也 为 React Native 提 供 了 该 功能 ， 而 且 还 提供 了 监控 
应 用 性 能 的 功能 。 

对 应 用 性 能 的 监控 如 图 2-52 所 示 。 


margin 


lol ged Blo /allolTe| 43ms 
ScriptExecution 203ms 
NativeModulelnit 34ms 
TTI 358ms 


Inspect nperf 


2-52 ”应 用 性 能 监控 界面 
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对 应 用 元 素 Box Model 的 监控 如 图 2-53 所 示 。 


BoxContainer * ElementBox * 


0 


0 
et 057 300) 
100 x 50 

0 


0 


0 0 


Eo Perf 


图 2-53 “元素 盒子 模型 检查 界面 
在 图 2-53 中 , 我 们 看 到 当前 选中 的 元 素颜 色 变 反 选 ， 而 且 在 该 元 素 的 下 边 列 出 了 padding、 
margin 、width 、height 等 盒子 模型 的 详细 信息 ， 便 于 我 们 快速 定位 问题 。 


口 Profiling。 该 功能 主要 用 来 监控 应 用 在 一 段 时 间 内 的 指标 信息 。 既 然 是 一 段 时 间 ， 就 要 有 
一 个 开始 动作 和 结束 动作 。 当 我 们 要 监控 应 用 指标 时 ， 需 要 在 操作 前 选择 Start Profiling， 
然后 在 操作 结束 后 选择 Stop Profiling， 这 样 就 会 弹出 一 个 提示 框 ， 如 图 2-54 所 示 。 


它 提 示 我 们 数据 已 经 生成 ， 同 时 会 在 包 服 务 端 看 到 下 面 的 日 志 信 息 : 


NOTE: Your profile data was kept at: 


/tmp/dump_1443827124505.json 
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Profile 


The profile has been generated, check 
the dev server log for instructions. 


OK 
图 2-54 ”指标 监控 成 功 后 的 弹出 界面 


打开 这 个 JSON 文 件 ， 就 可 以 看 到 应 用 在 这 段 时 间 内 的 详细 指标 信息 了 。 如 果 我 们 装 
Google trace-viewer 搬 件 ， 包 服务 器 会 帮 有 我 们 自动 调用 trace2zhtml es 
1443827124505.json 命 令 打开 该 JNON 文 件 。 


此 外 ， 介绍 一 个 重要 的 调试 工具 react-developer-tools ， 它 在 图 2-44 中 并 没有 涉及 ， 但 在 
日 1 所 以 这 里 也 单独 拿 出 来 讲 一 下 。 它 是 一 个 Chrome 浏 览 器 的 扩展 ， 能 详细 
显示 出 元 素 的 层级 关系 ， 以 及 每 个 组 件 对 应 的 state、props 等 属性 的 详细 信息 。 它 的 安装 地 址 为 
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi? 
hl=en。 它 是 配合 Debug in Chrome 中 打开 控制 台 使 用 的 , 如 果 控 制 台 打开 , 你 会 看 到 最 后 有 个 react 
标签 ,点 击 这 个 标签 ， 可 能 会 看 到 一 个 正在 连接 的 提示 ， 此 时 回 到 模拟 器 点 击 一 下 ， 就 会 看 到 当 
前 应 用 的 结构 啦 ， 如 图 2-55 所 示 。 


Q 日 Elements Network Sources Timeline Profiles ” Resources 由 Reactil > ”| 党 回 | x 
v<AppContainer rootTag=1> <View> ($r in the console) 
v<View style=90> props 
v<RCTView style=90> children: {.} 
v<View collapsible=false style=90> 2 
» <RCTView collapsible=false style=90>..</RCTV collapsible: false 
</View> style: 90 
</RCTView> 
iew> . 
</AppContainer> React Native Style Editor 
position : absolute 
left :0 
top 0 
right :0 
AppContainer View RCTView bottom 0 


图 2-55 React 的 Chrome 搬 件 界面 

这 里 可 以 很 方便 地 看 到 各 组 件 之 间 的 山 套 关系 以 及 每 个 组 件 的 事件 、 属 性 、 状 态 等 信息 。 

前 面 讲 到 的 都 是 基于 模拟 器 的 调试 , 那么 真 机 上 的 调试 是 怎样 的 呢 ? 这 里 阐述 下 真 机 调试 的 
流程 。 

(1) 配置 好 签名 证 书 ， 并 将 打包 环境 设置 成 Debug 模 式 。 

(2) 将 2.3.2 节 中 “(6) 修 改 端 口 ”涉及 的 localhost 改 为 对 应 的 卫 ， 而 且 需 要 调试 的 真 机 和 该 卫 
保持 在 一 个 网 段 。 将 调试 的 真 机 插 在 电脑 上 ， 在 Xcode 中 选择 这 个 真 机 作为 Simulator。 

(3) 运行 编译 命令 ， 这 样 待 编译 完成 后 就 会 在 真 机 设备 上 启动 应 用 了 。 要 在 真 机 上 要 调 出 调 
试 菜单 ， 只 需要 摇 一 摇 手 机 即 可 。 但 前 提 是 一 定 要 把 打包 环境 设置 为 Debug 模 式 ， 否 则 调试 菜单 
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出 不 来 。 菜 单 出 来 之 后 的 调试 方法 就 和 模拟 器 一 样 了 ， 这 里 也 就 不 再 细 说 啦 。 


2.3.4 内 部 发 布 

这 里 把 它 叫 做 内 部 发 布 而 不 叫 发 布 ， 是 因为 生成 的 是 BoxApp 的 包 , 没有 上 App Store， 但 内 
部 人 员 可 以 安装 和 使 用 。 

前 面 我 们 讲 的 都 是 电脑 上 模拟 器 的 处 理 ， 这 节 中 主要 讲 离线 状态 下 手机 设备 的 使 用 情况 。 

还 是 进入 到 上 面 讲 到 的 AppDelegate.m 中 ， 将 之 前 的 

jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"]; 
注释 掉 ， 并 且 将 

//jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; 
这 人 句 的 注释 去 掉 。 

接 下 来 ， 在 项 目 根 目录 下 运行 

curl http://localhost:8081/index.ios.bundle -o main.jsbundle 
或 者 运行 

react-native bundle 

此 时 就 会 在 项 目 和 目录 下 生成 main.jsbundle 文 件 ， 这 个 文件 将 所 有 编写 的 JavaScript 文 件 都 打 
包 在 一 起 了 。 

然后 配置 好 自己 的 证 书 ， 再 通过 Xcode 的 编译 运行 ， 就 可 以 得 到 一 个 离线 的 ipa 包 ， 我 们 闭 在 
真 机 上 就 可 以 在 无 网 络 的 情况 下 运行 BoxApp 了 。 


2.4 ”参考 资料 


本 章 的 参考 资料 如 下 : 


口 http://facebook.github.io/react-native/docs/getting-started.html 
口 https://github.com/facebook/react-native 

口 http:/npm.taobao.org/ 

口 https://nodejs.org/en/ 

口 http://facebook.github.io/react/docs/getting-started.html 

口 http://calendar.perfplanet.com/2013/diff/ 

口 http://www.w3.org/TR/css-flexbox/ 

口 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 


口 http://facebook.github.io/react-native/docs/flexbox.html#content 


图 灵 社 区 会 员 蚂 蜂 (240671488@qq.com) 专 享 尊重 版 权 


灵 社 区 会 员 蚂 蜂 (240671488@qq.com) 专 享 尊重 版 权 


口 第 3 章 
口 第 4 章 
口 第 5 章 
口 第 6 章 


第 二 部 分 
API 和 组 件 篇 


篆 用 组 件 及 其 实践 
常用 API 及 其 实践 
Native 扩 展 

组 件 封装 


灵 社区 会 员 蚂 蜂 (240671488@qq.com) 专 享 尊重 版 权 


吊 用 组 件 及 其 实 束 


通过 第 1 章 和 第 2 章 ， 我 们 基本 了 人 解 了 React Native 的 开发 环境 及 其 相关 的 基础 知识 。 那 么 ， 
在 这 一 章 中 ， 我 们 要 着 重 介绍 React Native 的 相关 组 件 。 只 有 掌握 了 React Native 的 组 件 ， 才 能 熟 
练 开发 App。 当 然 ，React Native 的 魅力 在 于 能 够 使 用 10S 的 原生 组 件 和 原生 API。 因 此 ,学 习 和 掌 
握 React Native 组 件 和 API 是 十 分 必要 的 。 


3.1 View 组件 


就 像 学 习 HTML 一 样 ， 标 签 十 分 重要 。 开 发 Web 应 用 程序 时 ， 需 要 使 用 很 多 的 HTML 标 签 ， 
例如 form、h1、canvas 等 。 但 是 在 基于 DIV+CSS 布 局 的 Web 开 发 中 , 最 为 重要 的 一 个 元 素 就 是 div。 
因为 div 是 页 面 布局 的 基础 ， 是 作为 容器 元 素 存 在 的 。 在 React Native 中 ， 就 有 一 个 类 似 于 div 的 组 
件 ， 那 就 是 View 组 件 。 


3.1.1 View 介绍 


View 是 一 个 容 絮 组 件 , 提供 了 视图 布局 的 功能 ， 是 UI 组 件 中 最 基本 的 组 件 。 它 可 以 多 层 悉 
套 , 支持 flexbox 布 局 , 起 到 容器 组 件 的 作用 。 使 用 View 组 件 ， 可 以 进行 复杂 的 布局 和 精巧 的 页 
面 设 计 。 


3.1.2 案例 : 九宫 格 实现 

对 View 组 件 有 了 个 初步 的 认识 后 ， 现 在 我 们 来 使 用 View 组 件 做 一 些 有 趣 的 事情 一 一 将 View 
组 件 用 于 实战 中 。 这 里 , 我 们 使 用 携程 的 客户 端 首页 举例 , 其 Web App 的 地 址 是 http://m.ctrip.com。 
访问 该 地 址 ， 可 以 看 到 其 首页 如 图 3-1 所 示 。 

那么 ,我 们 需要 实现 的 功能 是 中 间 的 “九宫 格 ” 布 局 。 如 图 3-1 所 示 ,“ 酒 店 ” 一 栏 布局 的 方 
式 有 很 多 种 。 
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特卖 汇 kk 成 签到 领 积分 他 


型 


SN 外 
电话 预订 下 载 客户 庙 我 的 


图 3-1 ”携程 首页 
水 平 3 栏 ， 第 二 栏 和 第 三 栏 分 别 上 下 两 栏 ， 如 图 3-2 所 示 。 


海外 酒店 团购 
酒店 2 3 
特惠 酒店 客栈 公寓 


图 3-2 第 一 种 布局 方式 
水 平 两 栏 ， 第 二 栏 分 为 上 下 两 栏 ， 再 进一步 将 上 下 两 栏 分 为 左右 两 栏 ， 如 图 3-3 所 示 。 


1 海外 酒店 。 了》 ”团购 | 
酒店 2 
特惠 酒店 。 /4 客栈 公寓 | 


图 3-3 第 二 种 布局 方式 
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这 里 我 们 使 用 第 一 种 方式 进行 布局 。 现 在 按照 如 下 步 又 实现 携程 App 的 “九宫 格 ”。 


(1) 加 载 View 组 件 。 首 先 ， 创 建 项 目 ， 然 后 在 index.ios.js 中 引入 react-native 并 加 载 View 组 件 ， 
代码 如 下 所 示 : 
var React = require('react-native'); 
var { 
AppRegistry, 
StyleSheet, 
View 
} = React; 
其 中 AppRegistry 和 StyleSheet 是 React Native 提 供 的 API， 前 者 负责 注册 App 入 口 组 件 ， 后 者 负责 
创建 样式 表 。 
(2) 创建 组 件 。 我 们 已 经 引入 了 React Native， 因 此 使 用 React.createClass 创 建 一 个 组 件 ， 即 
app， 它 将 作为 应 用 程序 的 入 口 组 件 。 相 关 代码 如 下 : 


var app = React.createClass({ 
render: function(){ 


} 

D3 

在 React.createClass 中 ,需要 有 一 个 render 方 法 ,该 方法 负责 演 染 视图 。 同 时 ，render 方 法 
需要 返回 一 个 JSX 对 象 (包含 hull ), 并 且 该 对 象 只 能 包含 在 一 个 节点 中 。 也 就 是 说 ,返回 的 对 象 
必须 有 且 只 有 一 个 容器 对 象 包 里。 当然 ,我们 会 在 后 续 的 步 又 中 补 全 render 方 法 。 

(3) 添加 样式 表 。 当 然 ， 我 们 也 可 以 使 用 内 联 样 式 。 这 里 建议 在 View 组 件 上 使 用 外 部 样式 ， 
而 不 是 内 联 样 式 ， 因 为 这 样 更 加 容易 维护 和 更 新 样式 。 下 面 创建 一 个 样式 对 象 styles， 有 具体 的 代 
码 如 下 所 示 : 


var styles = StyleSheet.create({ 


]); 
在 上 述 代码 中 , StyleSheet.create 用 于 创建 一 个 样式 对 象 , 其 中 传人 的 参数 是 一 个 JavaScript 
字面 量 对 象 。 这 里 建议 一 个 组 件 使 用 一 个 styleSheet 对 象 ， 而 不 是 多 个 组 件 共用 一 个 样式 对 象 ， 
因为 这 样 组 件 的 功能 更 加 细 化 和 解 夭 ， 更 能 体现 组 件 的 封装 ， 也 利于 后 续 开发 者 的 程序 维护 。 
(4) 注册 入 口 。 这 个 应 用 程序 应 该 有 一 个 入 口 ， 这 样 就 能 根据 入 口 组 件 动态 加 载 其 他 组 件 。 
React Native 提 供 了 AppRegistry API 来 做 这 件 事 ， 相 关 代 码 如 下 所 示 : 
AppRegistry.registerComponent('APP', () => app); 
registerComponent 方 法 的 第 一 个 参数 是 我 们 应 用 程序 的 名 称 ， 即 项 目的 名 称 , 第 二 个 参数 是 
入 口 组 件 对 象 ， 即 第 (2) 步 创建 的 app 对 象 。 在 4.1 节 中 ， 我们 会 详细 介绍 AppRegistry。 当 然 ,， 现 在 
你 也 可 以 翻阅 到 4.1 节 查看 。 


hl 
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(5) 外 层 布 局 。 这 里 我 们 选择 了 第 一 种 方式 ， 即 水 平 3 栏 ， 然 后 第 2 栏 和 第 3 栏 分 别 上 下 两 栏 ， 
如 图 3-2 所 示 。 首 先 在 View 中 栎 套 3 个 View 组 件 ， 代 码 如 下 所 示 : 


var app = React.createClass({ 
render: function(){ 
return ( 
<View> 
<View></View> 
<View></View> 
<View></View> 
</View> 


); 


’ 
> 
我 们 清楚 地 看 到 这 3 个 View 组 件 外 层 包 囊 了 一 个 View 组 件 ， 也 就 是 第 (2) 步 所 说 的 “有 且 只 有 
一 个 容器 对 象 包 里 ”。 其 实 ， 这 个 时 候 使 用 快捷 键 cmd+R 是 看 不 到 效果 的 ， 因 为 视图 泻 染 中 既 没 
有 边框 也 没有 文字 。 下 一 步 ， 我 们 让 它 可 视 化 。 
(6) flexbox 水 平 三 栏 布局 。 我 们 需要 将 3 个 View 组 件 水 平 布局 并 且 同 时 平分 屏幕 宽度 。React 
Native 支 持 flexbox 布 局 ，2.3 节 已 经 详细 介绍 过 。 上 有 具体 的 代码 如 下 : 


var app = React.createClass({ 
render: function(){ 
return ( 
<View style={styles.container}> 
<View style={styles.item}></View> 
<View style={styles.item}></View> 
<View style={styles.item}></View> 
</View> 
); 
} 
]); 


var styles = StyleSheet.create({ 
container:{ 

flex:1, 

borderWidth:1, 

borderColor: 'red', 

flexDirection: 'row' 


flex:1, 
height:80, 
borderColor: 'blue', 
borderWidth:1, 
} 
]); 


这 里 我 们 使 用 了 Stylesheet 创 建 样式 对 象 , 共 创 建 了 两 个 样式 : container 和 item。container 
作用 于 最 外 层 的 View 组 件 上 , 而 flex:1 的 意思 是 将 最 外 层 的 View 组 件 平 铺 占 满 整个 屏幕 ,并且 边 
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框 的 宽度 是 1pt ( 其 实 ， 你 也 可 以 将 其 想象 成 Web 开 发 中 的 px， 即 像素 )， 边 框 的 颜色 是 红色 。 这 
里 有 个 比较 重要 的 样式 ， 即 flexDirection。 因 为 在 React Native 中 ，flexbox 默 认 组 件 的 布局 方式 
是 纵向 布局 ， 即 flexDirection 的 默认 值 是 column。 因 此 ， 为 了 将 3 个 View 组 件 水 平 布 局 ， 需 要 将 
纵 癌 布 局 调整 为 水 平 布局 ， 即 flexDirection 的 值 设 为 row。 这 里 带 有 container 样 式 的 组 件 都 按照 
水 平方 式 布局 。item 样 式 作用 于 内 部 的 3 个 View 组 件 。 我 们 设 定 内 部 3 个 View 组 件 的 高 度 为 80, 边 
框 的 宽度 是 1， 边 框 的 颜色 是 蓝 色 。 我 们 注意 到 item 样 式 上 的 flex 的 值 也 是 1， 这 是 因为 我 们 需要 
将 3 个 View 组 件 平分 屏幕 宽度 。flexbox 的 flex 属 性 代表 的 是 权重 , 内 部 3 个 View 组 件 的 人 lex 值 都 是 
1， 所 以 3 个 View 分 别 占 13。 那 么 ， 这 个 1/3 具 体 指 什么 呢 ? 因为 我 们 在 父 层 节点 上 指出 了 按照 水 
平 布局 , 即 flexDirection: 'Tow', 所 以 这 3 个 View 组 件 平分 的 就 是 父 元 素 的 宽度 。 在 这 个 例子 中 ， 
是 三 等 分 了 屏幕 的 宽度 。 

同时 ， 我 们 也 注意 到 了 View 组 件 有 个 重要 的 属性 一 一 style， 该 属性 是 所 有 组 件 都 支持 的 ， 
其 属性 值 是 {]JavaScript JSON 对 象 } 的 形式 。 在 上 面 的 例子 中 ,我们 看 到 style={styles. 
container}， 这 就 是 引用 了 外 部 样式 。 如 果 需 要 写成 内 联 样式 ， 则 应 该 像 如 下 代码 所 示 : 
style={{flex:1, borderWidth:1, borderColor: 'red', flexDirection: 'row'}} 

如 果 需 要 包 庄 多 个 样式 类 ， 则 使 用 如 下 代码 : 
style={[styles.style1, styles.style2]} 

同时 包 右 样式 类 或 者 内 联 样 式 如 下 列 代码 所 示 : 
style={[styles.style1, {flex:1, borderWidth:1}]} 

当然 ， 我 们 不 建议 过 多 使 用 这 种 方式 。 

(7) 上 下 两 栏 布局 。 我 们 看 到 “海外 酒店 ”和 “特惠 酒店 ”是 在 第 2 栏 上 下 布局 ,“ 团 购 ” 和 “ 客 
栈 . 公 守 ”是 在 第 3 栏 上 下 布局 。 因 此 ， 我们 在 第 2 栏 和 第 3 栏 中 分 别 舱 入 两 个 View 组 件 。 为 了 方便 
显示 ， 这 里 引入 了 Text 组 件 ， 相 关 代码 如 下 : 

var { 

AppRegistry, 
StyleSheet, 
View, 


Text 
} = React; 


现在 就 可 以 在 View 组 件 里 面 使 用 Text 组 件 了 ， 这 样 文本 就 会 显示 在 界面 中 。3.2 节 会 对 Text 
组 件 做 详细 介绍 , 感 兴趣 的 读者 可 以 翻阅 查看 。 因 为 View 组 件 默认 是 纵向 (垂直 ) 布局 ， 所 以 这 
里 只 需要 给 上 下 两 个 View 组 件 加 上 flex:1 的 样式 就 可 以 了 , 这样 “海外 酒店 ”和 “特惠 酒店 ”就 
是 垂直 平分 外 层 View 组 件 高 度 。 具 体 的 代码 如 下 : 
var app = React.createClass({ 
render: function(){ 


return ( 
<View style={styles.container}> 


图 灵 社 区 会 员 蚂 蜂 (240671488@qq.com) 专 享 尊重 版 权 


3.1 


<View style={[styles.item, styles.center]}> 
<Text> 酒 店 </Text> 
</View> 
<View style={styles.item}> 
<View style={[styles.center, styles.flex]}> 
<Text> 海 外 酒店 </Text> 
</View> 
<View style={[styles.center, styles.flex]}> 
<Text> 特 惠 酒店 </Text> 
</View> 
</View> 
<View style={styles.item}> 
<View style={[styles.center, styles.flex]}> 
<Text> 团 购 </Text> 
</View> 
<View style={[styles.center, styles.flex]}> 
<Text> 客 栈 . 公 寓 </Text> 
</View> 
</View> 
</View> 


); 


}); 


var styles = StyleSheet.create({ 
container:{ 
flex:1， 
borderWidth:1, 
borderColor: 'red', 
flexDirection: 'row’ 


height:80, 
borderColor: 'blue', 
borderWidth:1, 
jj 
center:{ 
justifyContent:'center'，/* 垂 直 居 中 ， 实 际 上 是 按照 flexDirection 的 方向 居中 */ 
alignItems: 'center’ /* 水 平 居 中 */ 


})3 
到 目前 为 止 ， 我 们 完成 的 效果 还 比较 粗糙 ， 如 图 3-4 所 示 。 
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海外 酒店 团购 
酒店 


特惠 酒店 客栈 .公寓 


图 3-4 ”初步 效果 
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(8) 完善 效果 。 其 实 ， 这 样 的 效果 是 达 不 到 产品 要 求 的 ， 我 们 需要 进一步 完善 样式 ,使 其 更 
加 符合 我 们 的 预期 。 这 里 我 们 进行 了 如 下 处 理 : 背景 颜色 、 线 条 的 分 割 、 字 体 的 设置 、 圆 角 处 理 
等 。 具体 的 完成 代码 如 下 所 示 : 


Var React = require('react-native'); 


var { 
AppRegistry, 
StyleSheet, 
View, 
PixelRatio, 
Text 

} = React; 


var app = React.createClass({ 
render: function(){ 
return ( 
<View> 
<View style={styles.container}> 
<View style={[styles.item, styles.center]}> 
<Text style={styles.font}> 酒 店 </Text> 
</View> 
<View style={[styles.item, styles.lineLeftRight]}> 
<View style={[styles.center, styles.flex, styles.lineCenter]}> 
<Text style={styles.font}> 海 外 酒店 </Text> 
</View> 
<View style={[styles.center, styles.flex]}> 
<Text style={styles.font}> 特 患 酒店 </Text> 
</View> 
</View> 
<View style={styles.item}> 
<View style={[styles.center, styles.flex, styles.lineCenter]}> 
Text style={styles.font}> 团 购 </Text> 
</View> 
<View style={[styles.center, styles.flex]}> 
Text style={styles.font}> 客 栈 .公寓 </Text> 


人 入 


入 


</View> 
</View> 
</View> 
</View> 
后 
} 
})s 


var styles = StyleSheet.create({ 
container:{ 
marginTop:25, 
marginLeft:5, 
marginRight:5, 
height:84, 
flexDirection: 'row', 
borderRadius:5, 


图 灵 社 区 会 员 蚂 蜂 (240671488@qq.com) 专 享 尊重 版 权 


3.1 _ View 组件 好 101 


padding: 2， 
backgroundColor: '#FF0067 ， 


height:80, 
5 
center:{ 
JjustifyContent: ' Center ，/# 重 直 居 中 ， 实 际 上 是 按照 flexDirection 的 方向 居中 *#/ 
alignItems: 'center' /* 水 平 居 中 */ 
入 
flex:{ 
flex: 1 


}, 

font:{ 
color: '#fff", 
fontSize:16, 
fontWeight:'bold'" 

}, 

lineLeftRight:{ 
borderLeftWidth:1/PixelRatio.get(), 
borderRightWidth:1/PixelRatio.get(), 
borderColor: '#fff" 

}, 

lineCenter:{ 
borderBottomWidth:1/PixelRatio.get(), 
borderColor: '#fff" 


} 
}); 


AppRegistry.registerComponent('APP', () => app); 
完善 后 的 界面 效果 如 图 3-5 所 示 。 


iOS Simulator - iPhone 5 - iPhone 5 / iOS 8.2 (... 
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海外 酒店 


特惠 酒店 


图 3-5 ”简单 的 “九宫 格 ”效果 
在 前 面 的 代码 中 ， 我 们 做 了 细微 的 调整 ， 具 体 如 下 。 
口 引入 了 PixelRatio API ，PixelRatio 的 get 方 法 用 于 获取 高 清 设备 的 像素 比 。 使 用 
1/PixelRatio.get() 就 可 以 获得 最 小 线 宽 。 
口 container 使 用 了 margin 属 性 ，marginTop: 25 使 得 内 容 距 离 状 态 栏 25pt，marginLeft:5 和 
marginRight:5 分 别 用 于 设置 距离 屏幕 左边 和 右边 5pt。 
口 设置 字体 为 16pt、 白 色 、 粗 体 。 


图 灵 社 区 会 员 蚂 蜂 (240671488@qq.com) 专 享 尊重 版 权 


102 区 第 3 章 常用 组 件 及 其 实践 


3.2” Text 组件 


Text 组 件 主要 用 于 显示 文本 。 当 然 ， 它 具有 响应 特性 ， 该 特性 表现 为 被 触摸 时 是 否 高 亮 。 它 
同样 支持 多 层 上 能 套 ， 所 以 可 以 继承 样式 。 在 Web 开 发 中 ,字体 样式 的 继承 十 分 重要 。 比 如 网 页 大 
部 分 地 方 的 字体 都 是 12px， 此 时 我 们 可 以 在 body 上 设置 所 有 字体 是 12px。 但 是 React Native 是 不 支 
持 这 种 继承 的 ， 字 体 样式 只 有 在 Text 组 件 上 才 起 作用 。 因 此 ， 字 体 样式 的 继承 也 只 能 通过 Text 组 
件 来 实现 。 内 部 的 Text 组 件 可 以 继承 外 部 Text 组 件 的 样式 。 


3.2.1 ”Text 组 件 介 绍 


很 多 时 候 , 我 们 不 期 待 一 个 Text 组 件 具 有 过 多 的 功能 ,而 仅仅 是 显示 文本 。React Native 的 设 
计 也 是 如 此 ,但 是 Text 组 件 还 是 有 许多 特性 需要 我 们 注意 的 。Text 组 件 的 重要 性 不 言 而 喻 ,无论 
是 Web 开 发 还 是 客户 端 开 发 ， 都 离 不 开 Text 组 件 。Text 组 件 常用 的 特性 如 下 所 示 。 
D onPress: 该 属性 的 值 是 一 个 函数 , 支持 按 下 事件 ( 即 手指 触摸 事件 )。 当 手指 按 下 的 时 候 ， 
执行 该 函数 。 
口 number0fLines: 该 属性 的 值 是 一 个 数字 ， 用 于 规定 最 多 显示 多 少 行 ， 如 果 超 过 该 数值 ， 
则 以 省 略 号 (... ) 表示 。 
口 onLayout : 该 属性 的 值 是 一 个 函数 ， 用 于 获取 该 元 素 布局 的 位 置 和 大 小 ， 例 如 : 
{"target":4,"layout":{"y":10, "width":300,"x":10, "height":117}}。 一 般 事件 函数 的 形 
式 是 function(e){fconsole.log(e.nativeEvent)}; ， 这 样 就 可 以 打印 事件 的 参数 。 


3.2.2 ”案例 : 网 易 新 闻 列 表 展 示 

3.2.1 节 中 介绍 的 Text 组 件 的 属性 并 不 多 , 但 是 ， 它 的 有 些 特性 在 实践 中 还 是 需 注意 的 。 我 们 
不 仅 需要 做 理论 的 拜读 者 ,还 要 在 企业 开发 实践 中 去 验证 理论 和 踩 坑 。 在 这 一 节 中 , 我 们 需要 实 
践 的 是 网 易 新 闻 的 一 个 页 面 ， 如 图 3-6 所 示 。 


全 网 易 印 加 有 态度 ” 三 


宇航 员 在 太空 宣布 "三 体 "获奖 


NASA 发 短片 纪念 火星 征程 50 年 
男生 连续 做 一 周 苦瓜 吃 吐 女友 
女童 遭 涂 鱼 袭 击 又 下 海 救 伙 伴 
今日 要 闻 


学 
中 国 护航 军舰 遇 15 稻 疑似 海盗 船 开火 射 
击 警告 ) 14156 


图 3-6 “网易 新 闻 
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首先 ,我 们 来 分 析 该 页 面 的 结构 。 这 个 页 面 的 布局 相 来 说 比较 简单 ， 分 为 上 、 中 、 下 三 栏 布 
局 。React Native 提 倡 组 件 化 ， 那 么 组 件 化 的 颗粒 度 为 多 少 主要 取决 于 应 用 的 结构 设计 。 这 里 ， 
上 面 的 头 部 可 以 是 一 个 组 件 ， 中 间 的 文章 标题 列表 可 以 是 一 个 组 件 , 下面 的 “今日 要 闻 ” 可 以 是 
一 个 组 件 。 我 们 不 希望 该 页 面 过 于 复杂 ,不 希望 后 期 的 维护 成 本 很 高 。 因 此 ,我 们 将 头 部 组 件 独 
立成 一 个 文件 ， 而 将 列表 组 件 和 “今日 要 闻 ” 作 为 独立 组 件 放 在 同一 个 文件 内 。 这 样 做 的 好 处 是 
头 部 组 件 可 以 被 其 他 页 面 共用 ,列表 组 件 和 “今日 要 闻 ” 组 件 只 能 在 当前 页 面 使 用 。 我 们 规划 的 
结构 如 图 3-7 所 示 。 


新 闻 头 部 1 
列表 项 2 
今日 要 闻 3 


图 3-7 ”网易 新 闻 页 面 结构 图 
下 面 我 们 一 步 步 来 实现 这 个 页 面 。 
1. 封装 头 部 组 件 
打开 网 易 的 Web App (http:/news.163.com/mobile/ )， 可 以 发 现 网 易 的 头 部 标题 其 实 是 一 张 
SVG 格式 的 图 片 : http://img1.cache.netease.com/f2e/mews/index2015/img/logo.svg。 这 里 为 了 更 好 地 
练习 Text 组 件 ， 我 们 使 用 该 组 件 实现 类 似 的 效果 。 我 们 将 “网 易 新 闻 有 态度 "*” 分 为 3 个 Text 组 件 
来 实现 ， 这 样 就 可 以 表达 3 种 不 同 的 效果 ， 相 关 代码 如 下 所 示 : 


Var React = require('react-native'); 


var { 
AppRegistry, 
StyleSheet, 
View, 


var Header = React.createClass({ 
render: function(){ 
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return ( 
<View style={styles.flex}> 
<Text style={styles.font}> 
<Text style={styles.font 1}> 网 易 </Text> 
<Text style={styles.font 2}> 新 闻 </Text> 
<Text> 有 态度 "</Text> 
</Text> 
</View> 


); 
jb: 


var styles = StyleSheet.create({ 
flex:{ 
marginTop:25, 
height:50, 
borderBottomWidth:3/React.PixelRatio.get(), 
borderBottomColor: '#EF2D36 ， 
alignItems: center” /# 使 Text 组 件 水 平 居中 */ 


fontSize:25, 
fontWeight: “bold ， 
textAlign: "center”/# 使 文字 在 Text 组 件 中 居中 *#/ 


color: '#CD1D1C' 


]， 

font 2:{ 
color: '#FFF", 
backgroundColor: '#CD1D1C', 


} 
})); 


module.exports = Header; 


这 里 我 们 将 头 部 封装 成 了 一 个 简单 的 组 件 ， 在 代码 最 后 我 们 将 其 export 成 独立 的 模块 。 在 上 
面 的 代码 中 我 们 发 现 ，Text 组 件 艇 套 之 后 就 不 会 按照 flexbox 布 局 。 当 然 ， 这 也 符合 我 们 的 初衷 ， 
我 们 本 来 希望 Text 组 件 用 来 做 一 些 文本 的 展示 。 我 们 在 最 外 层 的 Text 组 件 上 定义 了 font 样 式 ， 即 
规定 了 该 Text 组 件 内 部 的 所 有 Text 组 件 的 字体 是 25pt， 字 体 加 粗 并 居中 显示 。 同 时 为 了 对 第 一 个 
和 第 二 个 Text 组 件 做 一 些 特别 的 处 理 ， 我 们 给 它们 分 别 加 上 了 font 1 和 font 2 样式 。 这 里 font 1 
的 字体 是 红色 ，font_2 的 字体 背景 是 红色 ,字体 是 白色 。 为 了 测试 组 件 是 否 可 用 ， 我 们 将 以 上 代 
码 放 和 headerjs 文 件 中 , 然后 在 index.ios.js 中 加 载 header.js 文 件 中 的 Header 组 件 , 具体 的 代码 如 下 : 


var React = require('react-native'); 
var Header = require('./header'); 


var { 
AppRegistry, 
StyleSheet, 
View, 
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Text 
= React; 


var app = React.createClass({ 
render: function(){ 
return ( 
<View style={styles.flex}> 
<Header></Header> 
</View> 
); 
} 
]); 


var styles = StyleSheet.create({ 
flex:{ 
flex:1 


} 
}); 


AppRegistry.registerComponent('APP', () => app); 


在 上 述 代 码 中 ，var Header = require('./header' ) 这 人 句 代 码 表明 我 们 使 用 require 函 数 加 载 
了 Header 组 件 。 这 里 我 们 使 用 组 件 的 方式 也 很 简单 : <Header></Header>。 头 部 组 件 运 行 的 效果 如 
图 3-8 所 示 。 


iOS Simulator - iPhone 5 - iPhone 5 / iOS 8.2 (... 


Carrier 令 5:54 PM mp 
网 易 剖 加 有 态度 


图 3-8 ” 头 部 组 件 效 果 


2. 列表 组 件 
这 里 我 们 希望 将 新 闻 标 题 做 成 列表 ， 而 每 一 条 新 闻 标题 实际 上 可 以 独立 成 一 个 简单 的 组 件 。 
同时 也 希望 将 标题 的 数据 传人 到 组 件 中 ， 而 不 是 写 死 在 组 件 上 。 具 体 的 代码 如 下 : 


var List = React.createClass({ 
render: function(){ 
return ( 
<View style={styles.list item}> 
<Text style={styles.list item font}>{this.props.title}</Text> 
</View> 
); 
} 
]); 
var styles = StyleSheet.create({ 
flex:{ 
flex:1 


}, 
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list item:{ 
height:40, 
arginLeft:10, 
arginRight:10, 
borderBottomWidth:1, 
borderBottomColor: “#ddd ' ， 
justifyContent: “centeT 
}, 
list item font:{ 
fontSize:16 
} 


})); 


这 里 我 们 使 用 React.createClass 创 建 了 List 组 件 ， 同 时 使 用 this.props 属 性 来 接收 外 部 传人 
的 参数 。 使 用 List 组 件 的 方法 如 下 : 


var app = React.createClass({ 
render: function(){ 
return ( 

<View style={styles.flex}> 
<Header></Header> 
<List title=' 字 航 员 在 太空 宣布 “三 体 ” 获 奖 '></List> 
<List title='NASA 发 短片 纪念 火星 征程 50 年 '></List> 
<List title= 男生 连续 做 一 周 苦瓜 吃 吐 女友 ></List> 
<List title= "女童 遭 薄 鱼 袭 击 又 下 海 救 伙伴 "></List> 

</View> 


)3 
}); 


这 里 我 们 只 是 在 List 组 件 上 加 入 title 属 性 即 可 。 此 时 列表 组 件 其 实 已 经 可 以 投入 生产 了 , 具 
体 的 效果 如 图 3-9 所 示 。 


iOS Simulator - iPhone 5 - iPhone 5 / iOS 8.2 (... 


Carrier 全 6:23 PM mw 
网 易 攻 出让 有 态度 。 


宇航 员 在 太空 宣布 “三 体 "获奖 
NASA 发 短片 纪念 火星 征程 50 年 
男生 连续 做 一 周 苦瓜 吃 吐 女友 
女童 遭 涂 鱼 袭击 又 下 海 救 伙伴 


图 3-9 ”新 闻 列表 


3. 完成 “今日 要 闻 ” 
我 们 在 “今日 要 闻 ” 组 件 上 要 完成 3 个 功能 : 
口 文章 标题 的 展示 ; 
口 文章 标题 超过 两 行 时 用 省 略 号 (… ) 代替; 
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口 点 击 标题 弹出 标题 内 容 。 
我 们 将 整 块 功能 封装 成 一 个 组 件 ， 具 体 的 实现 代码 如 下 : 


var ImportantNews = React.createClass({ 
show: function(title){ 
alert(title); 
}, 
render: function(){ 
var news = []; 
for(var i in this.props.news){ 
var text = ( 
<Text 
onPress={this. show.bind(this, this.props.news[i])} 
numberOfLines={2} 
style={styles.news item}> 
{this.props.news[i]} 
</Text> 
); 


news.push(text); 


We 


return ( 
<View style={styles.flex}> 
<Text style={styles.news title}> 今 日 要 闻 </Text> 
{news} 
</View> 


var styles = StyleSheet.create({ 
flex:{ 


marginLeft:10, 
marginRight:10, 
borderBottomWidth:1, 
borderBottomColor: '#ddd', 
justifyContent: 'center' 
}, 
item font:{ 
fontSize:16 

}, 
news title:{ 
fontSize:20, 
fontweight:'bold ， 
color: '#CD1D1C', 
marginLeft:10, 
marginTop:15, 


和 
news_item:{ 
marginLeft:10, 
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marginRight:10, 
fontSize:15, 
lineHeight:20, 
} 
]); 
在 上 面 的 代码 中 , 我们 给 Text 组 件 增 加 了 onPress 事 件 。 这 里 ， 当 新 闻 被 按 下 的 时 候 , 会 弹出 
新 闻 的 标题 。 需 要 注意 的 是 , 这 里 传递 参数 时 需要 使 用 bind 方 法 ,该 方法 的 第 一 个 参数 是 上 下 文 
对 象 ， 第 二 个 参数 是 传递 参数 ;同时 需要 使 用 numper0fLines 指 定 标题 最 多 两 行 。 此 外 ， 我 们 使 
用 this.props 获 取 传 递 的 数据 。ImportantNews 组 件 默认 只 需要 传递 一 个 新 闻 的 数组 即 可 , 这 里 使 
用 了 alert 函 数 ， 该 函数 是 全 局 的 ， 可 以 调用 系统 的 弹出 信息 窗 。 调 用 ImportantNews 组 件 时 ， 只 
需 一 名 代码 即 可 ， 上 具体 如 下 所 示 : 
<ImportantNews news={ 
'1、 刘 总 的 《三 体 》 菊 “ 征 采 奖 ” 为 中 国 作家 首次 
'2、 京 津 淡 协 同 发 展 定 位 明确 : 北京 无 经 济 中 心 表述 ， 
'3、 好 坷 宝宝 第 一 次 淋 雨 ,父亲 用 镜头 记录 了 下 来 '， 


'4、 人 民 邮 电 出 版 社 即 将 出 版 《React Native 入 门 与 实战 》， 读 者 可 以 使 用 JavaScript 开 发 原生 应 用 ' ]}> 
</ImportantNews> 


4. 最 终 效 果 和 代码 
现在 我 们 已 经 完成 了 大 部 分 的 内 容 ， 得 到 的 效果 如 图 3-10 所 示 。 


Carrier 全 3:15 PM [了 
网 易 剖 天 有 态度 

宇航 员 在 太空 宣布 “三 体 "获奖 

NASA 发 短片 纪念 火星 征程 50 年 


男生 连续 做 一 周 苦瓜 吃 吐 女友 


女童 遭 效 鱼 袭 击 又 下 海 救 伙伴 
今日 要 闻 

1、 刘 慈 欣 《三 体 》 获 " 雨 果 奖 "为 中 国 作家 首 
次 

2、 京 津 费 协同 发 展 定位 明确 : 北京 无 经 济 中 
心 表述 

3、 好 奇 宝宝 第 一 次 淋 雨 ， 父 亲 用 镜头 记录 了 


下 来 
4、 人 民 邮 电 出 版 社 即将 出 版 《React Native 
入 门 与 实战 》， 读 者 可 以 使 用 JavaScript 开 … 


图 3-10 ”网 易 新 闻 效果 
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该 节 的 完整 代码 可 参考 https://github.com/vczero/React-Native-Code 项 目 中 的 第 3 章 3.2 节 。 


3.3 NavigatorlOS 组 件 


应 用 程序 往往 由 很 多 功能 视图 组 成 。 就 像 Web App 一 样 ， 多 页 应 用 自然 是 多 个 页 面 ， 单 页 应 

用 也 会 存在 不 同 路 由 。 因此， 一 个 应 用 中 最 为 重要 的 功能 之 一 就 是 “路 由 ”( 或 者 说 是 “导航 ” ) 
因为 只 有 存在 路 由 ， 才 能 实现 视图 之 间 的 切换 和 前 进 、 后 退 。 在 React Native 中 ， 就 存在 一 个 专 

门 负责 视图 切换 的 组 件 ， 它 就 是 NavigatorlOS 组 件 。 该 组 件 具有 很 多 有 用 的 方法 和 属性 ， 可 以 很 

方便 地 让 我 们 进行 路 由 管理 。 当 然 ，React Native 也 提供 了 一 个 兄弟 组 件 ， 那 就 是 Navigator。 如 | 
果 需 要 了 解 Navigator 的 用 法 ， 可 以 翻阅 到 10.3.3 节 查看 。 


3.3.1 NavigatorlOS 组 件 介绍 


该 组 件 本 质 上 是 对 UIKit navigation 的 包装 。 也 就 是 说 ， 使 用 NavigatorIOS 进 行路 由 切换 ， 实 
质 上 是 调用 了 UIKit 的 navigation。 


路 由 是 一 个 JavaScript 对 象 ， 代 表 着 一 个 页 面 (或 者 说 视图 ) 组 件 。NavigatorIOS 组 件 默认 的 
路 由 提供 了 initialRoute 属 性 。 示 例 代 码 如 下 : 


render: function() { 
return ( 
<NavigatorI0OS 

initialRoute={{ 
component: MyView, 
title: 'My View Title', 
passProps: { myProp: 'foo' }, 

}} 


在 上 面 的 代码 中 ，component 表 示 该 页 面 需 要 加 载 的 组 件 视图 ，title 表 示 需 要 在 头 部 显示 的 
标题 ，passProps 用 于 页 面 间 传 递 数据 。 


这 里 简要 介绍 一 下 NavigatorIOS 组 件 的 属性 ， 具 体 如 下 所 示 。 


口 barTintColor: 导航 条 的 背景 颜色 。 
口 initialRoute: 初始 化 路 由 。 路 由 对 象 如 下 所 示 : 


{ 
component: function，// 加 载 的 视图 组 件 
title: string，// 当 前 视图 的 标题 
passProps: object，// 传 递 的 数据 
backButtonIcon: Image.propTypes.source,// 后 退 按 钮 图 标 
backButtonTitle: string,// 后 退 按钮 标题 
leftButtonIcon: Image.propTypes.source，// 左 边 按 钮 图 标 
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leftButtonTitle: string，// 左 边 按 钮 标题 

onLeftButtonPress: function,// 左 边 按钮 点 击 事件 

rightButtonIcon: Image.propTypes.Source，// 右 边 按钮 图 标 

rightButtonTitle: string，// 右 边 按钮 标题 

onRightButtonPress: function，// 右 边 按钮 点 击 事件 

WwWITapperStyle: [object Object]// 包 衷 样式 

} 
口 itemWrapperStyle: 为 每 一 项 定制 样式 ， 例 如 设置 每 个 页 面 的 背景 颜色 。 
口 navigationBarHidden: 当 其 值 为 true 时 ， 隐 藏 导航 栏 。 
D shadowHidden: 是 否 隐 藏 阴影 ， 其 值 为 true 或 者 false。 
D tintColor: 导航 栏 上 按钮 的 颜色 设置 。 
D titleTextColor: 导航 栏 上 字体 的 颜色 。 
D translucent: 导航 栏 是 否 是 半 透 明 的 ， 其 值 为 true 或 者 false。 

在 组 件 视图 切换 的 时 候 ，navigator 会 作为 一 个 属性 对 象 被 传递 。 我 们 可 以 通过 this.props. 
navigator 获 得 navigator 对 象 。navigator 是 一 个 十 分 重要 的 对 象 ， 它 可 以 控制 路 由 的 跳 转 和 组 件 
的 加 载 。 因 此 ,要 掌握 NavigatorIOS 组 件 ， 必 须 掌 握 navigator 对 象 。navigator 对 象 的 主要 方法 如 
下 所 示 。 

D push(route) :加载 一 个 新 的 页 面 ( 视图 或 者 路 由 ) 并 且 路 由 到 该 页 面 。 

口 pop(): 返回 到 上 一 个 页 面 。 

口 popN(n) : 一 次 性 返回 N 个 页 面 ， 当 N=1 时 ， 即 相当 于 pop() 方 法 的 效果 。 

口 replace(route): 替换 当前 的 路 由 。 
D replacePrevious(route): 替换 前 一 人 个 页 面 的 筑 图 并 且 回 授 过 去 。 
口 resetTo(route): 取代 最 顶层 的 路 由 并 且 回 退 过 去 。 

口 popToTop(): 回 到 最 上 层 视 图 。 


可 以 看 到 ，navigator 提 供 的 方法 已 经 很 强大 了 。 


3.3.2 ”案例 : 列表 页 跳 转 详情 页 
导航 栏 几乎 在 所 有 的 应 用 中 都 存在 ， 是 App 页 面 (视图 ) 跳 转 的 基石 。 这 里 我 们 演示 一 个 简 
单 的 例子 : 从 列表 页 跳 转 到 详情 页 ， 如 图 3-11 所 示 。 
为 了 实现 图 3-11 所 示 的 跳 转 ， 需 要 如 下 3 个 组 件 : 
口 App 入 口 组 件 ; 
口 列表 页 组 件 ; 
口 详情 页 组 件 。 


我 们 按照 以 下 步 又 完成 这 个 跳 转 。 
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邮轮 一 邮轮 详情 购物 车 
妆 豪华 邮轮 济州 岛 3 日 游 豪华 邮轮 济州 岛 3 日 游 
六 豪华 邮轮 台湾 3 日 游 二 二 进 入 详情 页 | 这 里 展示 邮轮 的 详情 信息 
去 豪华 邮轮 地 中 海 8 日 游 
列表 页 详情 页 


图 3-11 原型 设计 


1. 入 口 组 件 


首先 ， 加 载 NavigatorIOS 组 件 ， 并 将 其 作为 路 由 跳 转 的 入 口 ， 具 体 代码 如 下 : 


var NV = React.createClass({ 
render: function(){ 
return 
<NavigatorIOS 
style={{flex:1}} 
initialRoute={{ 
component: List, 
title: ' 邮 轮 '， 
passProps: {}, 


这 里 我 们 为 NavigatorIOS 组 件 配置 了 一 个 初始 化 路 由 ( initialRoute )， 即 List。 这 样 页 面 启 


动 的 时 候 ， 就 会 加 载 List 组 件 。 
2. 列表 页 组 件 


这 里 我 们 使 用 SerollView 组 件 和 Text 组 件 构 建 最 


示 3 条 邮轮 的 信息 ， 具 体 代码 如 下 : 


var List = React.createClass({ 
render: function(){ 
return ( 


简单 的 列表 页 组 件 。 为 了 演示 需要 ， 这 里 展 
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<ScrollView style={styles.flex}> 
<Text style={styles.list item} onPress={this.goTo}> 次 豪华 邮轮 济州 岛 3 日 游 </Text> 
<Text style={styles.list item} onPress={this.goTo}> 次 豪华 邮轮 台湾 3 日 游 </Text> 
<Text style={styles.list item} onPress={this.goTo}> 次 豪华 邮轮 地 中 海 8 日 游 </Text> 
</ScrollView> 
); 
lj 
goTo: function(){ 
this.props.navigator.push({ 
component: Detail, 
title: “邮轮 详情 ， 
rightButtonTitle: “购物 车 '， 
onRightButtonpress: function(){ 
alert(' 进 入 我 的 购物 车 '); 


在 上 面 的 代码 中 , 我 们 定义 了 一 个 List 组 件 。 该 组 件 展示 了 3 条 邮轮 的 信息 ,并 且 每 条 信息 绑 
定 了 一 个 点 击 事件 。 当 用 户 点 击 某 一 条 邮轮 信息 时 ， 我 们 使 用 this.props.navigator 向 里 面 添加 
Detail 视 图 ;并且 ，Detail 视 图 的 标题 是 “邮轮 详情 ”， 右 边 按钮 的 标题 是 “购物 车 ”。 当 点 击 “ 购 
物 车 ”按钮 时 ,会 弹出 “进入 我 的 购物 车 ”信息 框 。 


3. 详情 页 组 件 


在 List 组 件 中 ， 我 们 使 用 了 详情 页 组 件 ( Detail )。 因 此 ， 这 里 需要 开发 一 个 简单 的 详情 页 组 
件 ， 具体 的 代码 如 下 : 


var Detail = React.createClass({ 
render: function(){ 


return ( 
<ScrollView> 
x<Text> 详 情 页 </Text> 
<Text> 尽 管 信 息 很 少 ， 但 这 就 是 详情 页 </Text> 
</ScrollView> 
有 
} 
}; 


详情 页 组 件 很 简单 ， 这 里 只 是 简单 展示 了 两 行文 本 。 

4. 整体 代码 和 效果 

现在 , 我 们 清楚 地 知道 NV 组 件 调 用 List 组 件 ，List 组 件 调 用 Detail 组 件 , 它们 之 间 形 成 链 式 关 
系 ， 所 有 的 路 由 都 被 navigator.push 到 一 个 路 由 数组 中 ，navigator 对 象 对 路 由 进行 控制 和 跳 转 。 
该 实例 的 完整 代码 可 以 参考 https://github.com/vczero/React-Native-Code 中 的 3.3 节 。 项目 运行 
的 效果 如 图 3-12 所 示 。 
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iOS Simulator - iPhone 5 - iPhone 5 / iOS 8.2 (... iOS Simulator - iPhone 5 - iPhone 5 / iOS 8.2 (… 
Carrier 全 12:34 AM 本 本 | | Carrier 全 12:34 AM mw 
邮轮 《 邮轮 邮轮 详情 购物 车 
| 华 邮 软 济 | 详情 页 - | 
妈 豪华 邮轮 济州 岛 3 日 游 尽管 是 空白 ， 但 这 就 是 详情 页 | 
冯 豪华 邮轮 台湾 3 日 游 
衣 豪华 邮轮 地 中 海 8 日 游 


图 3-12” NavigatorIOS 效 果 图 


3.4 _ Textlnput 组 件 


在 一 个 应 用 程序 中 ， 输 入 框 是 必 不 可 少 的 ， 比 如 “搜索 ”功能 是 大 部 分 应 用 程序 都 拥有 的 。 
TextInput 是 可 以 通过 键盘 将 文本 输入 到 App 的 组 件 ， 它 提供 了 比较 丰富 的 功能 ， 例 如 自动 校 验 、 
占 位 符 以 及 指定 弹出 不 同 的 键盘 类 型 等 。 


3.4.1 _ Textlnput 组 件 介绍 


我 们 期 待 TextInput 能 帮助 我 们 做 更 多 的 事情 ， 而 不 是 我 们 去 模拟 一 些 事件 和 属性 。React 
Native 在 TextInput 做 的 还 是 很 好 的 ， 属 性 和 事件 基本 够 用 。 我 们 既 可 以 用 TextInput 组 件 做 基本 的 
组 件 ， 也 可 以 用 TextInput 组 件 做 自动 补 全 的 搜索 功能 。TextInput 的 主要 属性 和 事件 如 下 所 示 。 

口 autoCapitalize: 枚 举 类 型 ， 可 选 值 有 'none' 、'sentences' 、'words' 、'characters'。 当 
用 户 输入 时 ， 用 于 提示 。 

口 placeholder: 占 位 符 ， 在 输入 前 显示 的 文本 内 容 。 

D value: 文本 输入 框 的 默认 值 。 

口 placeholderTextColor: 占 位 符 文本 的 颜色 。 

口 password: 如 果 为 true， 则 是 密码 输入 框 ， 文本 显示 为 “*”。 

口 multiline: 如 果 为 true， 则 是 多 行 输入 。 
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口 editable: 如 果 为 false， 文 本 框 不 可 输入 。 其 默认 值 是 true。 
口 autoFocus: 如 果 为 true， 将 自动 聚焦 。 
口 clearButtonMode: 枚 举 类 型 ， 可 选 值 有 'never' 、'while-editing' 、'unless-editing'、 
'always' 。 用 于 显示 清除 按钮 。 

口 maxLength: 能 够 输入 的 最 长 字符 数 。 

口 enablesReturnKeyAutomatically: 如 果 值 为 true, 表示 没有 文本 时 键盘 是 不 能 有 返回 键 的 。 
其 默认 值 为 false。 

口 returnKeyType: 枚 举 类 型 , 可 选 值 有 'default' 、'go' 、'google' 、'join' 、'next'、'Toute '、 
'search' 、'send' 、'yahoo' 、'done' 、'emergency-cal1' 。 表 示 软 键盘 返回 键 显示 的 字符 串 。 
口 secureTextEntry: 如 果 为 true， 则 像 密 码 框 一 样 隐藏 输入 内 容 。 默 认 值 为 false。 

口 onChangeText: 当 文 本 输入 框 的 内 容 变 化 时 ,调用 该 函数 。onChangeText 接 收 一 个 文本 的 
参数 对 象 。 

口 onChange: 当 文 本 变化 时 ， 调 用 该 函数 。 

口 onEndEditing: 当 结束 编辑 时 ， 调 用 该 函数 。 

口 onBlur: 失去 焦点 触发 事件 。 

口 onFocus: 获得 焦点 触发 事件 。 

口 onSubmitEditing: 当 结 束 编辑 后 ， 点 击 键 盘 的 提交 按钮 触发 该 事件 。 


3.4.2 ”案例 : 搜索 自动 提示 


在 不 少 应 用 中 ,都 有 基于 位 置 的 搜索 ， 这 里 我 们 以 高 德 地 图 App 的 搜索 为 例 进 行 介绍 ， 我 们 
需要 完成 的 是 搜索 框 和 自动 提示 的 结果 列表 ， 如 图 3-13 所 示 。 


eevee 中 国联 通 令 11:20 @19 Dt 
《 | 后果 e 世 3 
后 果 庄 
后 果园 竺 


QD 80 后 果蔬 综合 商店 


) 后果 桃 


外 中 


#@* ,.?! ABC DEF 
Ws GHI | JKL MNO 国富 
拼音 PQRS TUV WXYZ 


搜索 
枚 "是 选 拼音 空格 


图 3-13 ”地 名 搜索 
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在 App 中 ， 搜 索 功 能 往往 是 一 个 组 件 ， 因 此 ， 将 搜索 功能 封装 成 组 件 是 一 个 很 好 的 决定 。 我 
们 按照 以 下 步骤 完成 搜索 功能 。 

1. 输入 框 

React Native 默 认 的 输入 框 还 是 很 不 美观 的 ， 因 此 ， 对 输入 框 的 定制 是 必 不 可 少 的。 我 们 设 
计 输 入 框 距离 屏幕 左 侧 5pt， 搜 索 按钮 距离 屏幕 右 侧 5pt。 这 样 ， 我 们 的 搜索 输入 框 左右 距离 是 一 
致 的 ， 看 起 来 比较 协调 。 下 面 定义 Search 组 件 ， 具 体 代 码 如 下 : 


Var React = require('react-native'); 
var { 

StyleSheet, 

Text， 

AppRegistry, 

View, 

TextInput， 

= React; 


var Search = React.createClass({ 
render: function(){ 
return 
<View style={[styles.flex, styles.flexDirection]}> 
<View style={styles.flex}> 
<TextInput style={styles.input} returnKeyType="search"/> 
</View> 
<View style={styles.btn}> 
<Text style={styles.search}> 搜 索 </Text> 
</View> 
</View> 
); 
} 
]); 


var App = React.createClass({ 
render: function(){ 
return( 
<View style={[styles.flex, styles.topStatus]}> 
<Search></Search> 
</View> 


); 


flex:{ 

flexDirection:{ 
flexDirection:'row’' 

}, 

topStatus:{ 


marginTop:25, 


}, 
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input:{ 
height:45, 
borderWidth:1, 
marginLeft: 5, 
paddingLeft:5， 
borderColor: '#ccc', 
borderRadius: 4 

} 

btn:{ 
width:55， 
marginLeft:-5, 
marginRight:5, 
backgroundColor: '#23BEFF ， 
height:45， 
JjustifyContent: ' center ， 
alignItems: 'center' 

外 ， 

search:{ 
color: '#fff",， 
fontSize:15, 
fontWeight:'bold'" 

} 


]); 
AppRegistry.registerComponent('APP', () => App); 


运行 程序 ， 得 到 的 输入 框 的 效果 如 图 3-14 所 示 。 


OS Simulator - iPhone 5 - iPhone 5 / iOS 8.2 ( 
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图 3-14 ”搜索 框 
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如 果 点 击发 现 无 法 弹出 虚拟 键盘 ， 可 以 到 iOS Simulator ( 模拟 器 ) 上 进行 设置 ， 具体 可 以 参 
照 图 3-15。 首 先 ， 选 中 Connect Hardware Keyboard， 然 后 点 击 Toggle Software Keyboard 即 可 。 


iOS Simulator File Edit 国 ec Debug Window Help 


Lo v iOS Uses Same Layout As OS X 
“VvV Connect Hardware Keyboard 人 3%K 
| ExternalDisplays 


Toggle Software Keyboard E49 


图 3-15 ”键盘 设置 


2. 自动 提示 列表 

很 多 App 的 搜索 都 是 这 样 的 : 当 我 们 输入 一 个 关键 字 的 时 候 ， 会 列 出 相关 的 搜索 结果 列表 。 
一 般 情 况 下 ， 完 成 该 功能 需要 一 个 搜索 服务 ， 返 回 n 条 结果 ， 然 后 将 其 展示 出 来 。 这 里 ， 我 们 使 
用 静态 数据 模拟 结果 。 我们 的 搜索 结果 需要 根据 用 户 是 否 输入 关键 字 而 显示 。 这 里 我 们 使 用 show 
变量 标识 是 否 显 示 结 果 列 表 。 具 体 代 码 如 下 : 


Var React = require('react-native'); 
var { 
StyleSheet, 
Text， 
AppRegistry, 
View, 
TextInput, 
} = React; 
var onePT = 1 / React.PixelRatio.get(); 
var Search = React.createClass({ 
getInitialState: function(){ 
return { 
show: false 


}; 
}, 
getValue: function(text){ 

var value = text; 

this.setState({ 


show: true, 
value: value 
}); 


}, 
hide: function(val){ 
this.setState({ 
show: false, 

value: val 


}); 
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)， 
render: function(){ 
return ( 
<View style={styles.flex}> 
<View style={[styles.flexDirection, styles.inputHeight]}> 
<View style={styles.flex}> 
<TextInput 
style={styles.input} 
returnKeyType=" search" 
placeholder=" 请 输入 关键 字 " 
onEndEditing={this.hide.bind(this, this.state.value)} 
value={this.state.value} 
onChangeText={this.getValue}/> 
</View> 
<View style={styles.btn}> 
<Text style={styles.search} onpress={this.hide.bind(this, 
this.state.value)}> 搜 索 </Text> 
</View> 
</View> 
{this.state. show? 
<View style={[styles.result]}> 
<Text onpress={this.hide.bind(this, this.state.value + ' 庄 ')} 
style={styles.item} numberOfLines={1}>{this.state.value} 庄 </Text> 
<Text onpress={this.hide.bind(this, this.state.value + ' 园 街 ' )} 
style={styles.item} numberOfLines={1}>{this.state.value} 园 街 </Text> 
<Text onpress={this.hide.bind(this, 80 + this.state.value + ' 综 合 商店 ' )} 
style={styles.item} numberOfLines={1}>80{this.state.value} 综 合 商店 </Text> 
<Text onpress={this.hide.bind(this, this.state.value + ' 桃 ')} 
style={styles.item} numberOfLines={1}>{this.state.value} 桃 </Text> 
<Text onpress={this.hide.bind(this,，' 杨 林 ' + this.state.value + ' 园 ')} 
style={styles.item} number0OfLines={1}> 杨 林 {this.state.value}</Text> 
</View> 
: null 
} 
</View> 
); 
)， 
]); 


var App = React.createClass({ 
render: function(){ 
return( 
<View style={[styles.flex, styles.topStatus]}> 
<Search></Search> 
</View> 


var styles = StyleSheet.create({ 
flex:{ 


flexDirection:{ 
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flexDirection:'row' 


topStatus:{ 
marginTop:25, 


inputHeight:{ 
height:45, 


input:{ 
height:45, 
borderWidth:1, 
marginLeft: 5， 
paddingLeft:5， 
borderColor: '#ccc', 
borderRadius: 4 

}， 

btn:{ 
width:55, 
marginLeft:-5, 
marginRight:5, 
backgroundColor: '#23BEFF ， 
height:45, 
justifyContent:'center', 
alignItems: “Center 


}, 
search:{ 
color: '#fff " ， 
fontSize:15, 
fontWeight:'bold' 
}, 
result:{ 
marginTop:onePT, 
marginLeft:5, 
marginRight:5, 
height:200, 
borderColor: '#ccc', 
borderTopWidth:onePT, 
}, 
item:{ 
fontSize:16, 
padding:5， 
paddingTop:10， 
paddingBottom:10, 
borderWidth:onePT, 
borderColor: '#ddd ， 
borderTopWidth:0, 
} 
]); 
AppRegistry.registerComponent('APP', () => App); 


我 们 通过 判断 this.state.show 来 确定 是 否 显示 结果 列表 。 如 果 this.state.show 是 true, 则 显 
示 。 如 果 是 false， 则 隐藏 ( null 对象 不 显示 )。 结 果 列 表 的 规则 是 : 输入 关键 字 + 预 设 关键 字 。 
这 样 的 话 ， 我 们 省 去 了 服务 端 。 同 时 ， 点 击 结果 列表 中 的 某 一 项 ,应 该 隐藏 列表 并 且 将 结果 显示 
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在 输入 框 中 。onpPress={this.hide.bind(this，this.state.value + ' 庄 ')} 就 是 当 用 户 点 击 时 ， 
将 字符 串 结 果 拼 接 传 人 到 hide 函 数 中 。 

hide 函 数 很 简单 ， 就 是 将 this.state.show 设 置 为 false， 这 样 会 将 结果 列表 隐藏 起 来 了 。 因 为 
状态 的 改变 引起 了 视图 的 重新 泻 染 ， 遇 到 this.state.show 为 false， 就 不 泻 染 结果 列表 。 同 时 ， 
设置 value 为 我 们 拼接 好 的 结果 字符 串 。 我 们 需要 对 TextInput 做 一 些 处 理 ， 才 能 更 好 地 符合 预期 。 
我 们 期 待 ， 当 用 户 点 击 结果 列表 中 的 某 一 项 时 ， 结 果 会 出 现在 搜索 框 中 。 我 们 在 Textmput 组 件 上 
增加 了 如 下 几 个 属性 。 
口 returnKeyType: 因为 这 里 的 应 用 场景 是 搜索 ， 所 以 们 虚拟 键盘 的 返回 键 是 search。 
口 placeholder: 显示 在 输入 前 的 占 位 符 “ 请 输入 关键 字 ”。 
口 onEndEditing: 用 户 结束 编辑 时 触发 该 事件 ， 会 将 this.state.value 值 写 人 。 这 样 ， 就 能 
在 搜索 框 中 显示 该 值 。 
口 value: 通过 this.state.value 修 改 TextInput 的 value 值 。 
口 onChangeText: 监听 输入 框 值 的 变化 ，onChangeText 获 取 的 值 作为 字符 串 传人 。 


在 初始 化 的 时 候 ， 设 置 结果 列 表 为 隐藏 ， 即 在 getInitialState 中 设置 show 为 false。 

3. 完成 的 效果 

我 们 可 以 继续 完善 部 分 样式 , 使 得 功能 更 加 符合 产品 的 预期 。 比 如 ,使 用 React.PixelRatio. 
get() 来 获取 最 小 线 宽 。 该 实例 的 完整 代码 可 以 参考 https://github.com/vczero/React-Native-Code 中 
的 第 3 章 3.4 节 。 最 终 完 成 的 效果 如 图 3-16 所 示 。 
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图 3-16 ”搜索 自动 提示 
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3.5 ”Touchable 类 组 件 


React Native 没 有 像 Web 开 发 那样 可 以 给 元 泰 (组件 ) 绑 定 click 事 件 。 在 3.2 节 中 ， 我 们 知道 
Text 组 件 有 onPress 事 件 ， 可 以 给 Text 组 件 绑 定 触摸 点 击 事件 。 为 了 像 Text 组 件 那 样 使 得 其 他 组 件 
可 以 被 点 击 ，React Native 提 供 了 3 个 组 件 来 做 这 件 事 。 这 3 个 组 件 称 为 “Touchable 类 组 件 ”， 具 体 
如 下 所 示 。 
D TouchableHighlight: 高 亮 触摸 。 用 户 点 击 时 ， 会 产生 高 亮 效 果 。 

口 TouchableOpacity: 透明 触摸 。 用 户 点 击 时 ， 点 击 的 组 件 会 出 现 透 明 过 渡 效 果 。 
口 TouchableWithoutFeedback: 无 反馈 性 触摸 。 用 户 点 击 时 ， 点 击 的 组 件 不 会 出 现任 何 视 


觉 变化 。 


3.5.1 TouchableHighlight 组 件 
在 Native App 中 ， 我 们 希望 点 击 的 时 候 会 有 一 些 视觉 上 的 变化 。 这 样 ， 视 觉 的 变化 会 告知 我 
们 已 经 点 击 过 了 ， 从 而 避免 重复 点 击 。TouchableHighlight 组 件 的 属性 如 下 所 示 。 
D active0pacity: 触摸 时 透明 度 的 设置 。 
D onHideUnderlay: 隐藏 背景 阴影 时 触发 该 事件 。 
口 onShowUnderlay: 出 现 背景 阴影 时 触发 该 事件 。 
口 underlayColor: 点 击 时 背景 阴影 效果 的 背景 颜色 。 
这 里 我 们 通过 示例 演示 一 下 TouchableHighlight 组 件 的 用 法 ， 相 关 代 码 如 下 : 


Var React = require('react-native'); 


var { 
StyleSheet, 
Text， 
AppRegistry, 
View, 
TouchableHighlight, 

} = React; 


var App = React.createClass({ 
show: function(text){ 
alert(text); 


render: function(){ 
return 
<View style={[styles.flex]}> 
<View> 
<TouchableHighlight 
onPress={this.show.bind(this，'React Native 入 门 与 实战 ')} 
underlayColor="#E1F6FF" 
> 
<Text style={styles.item}>React Native 入 门 与 实战 </Text> 
</TouchableHighlight> 
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<TouchableHighlight 
onPress={this.show.bind(this,，' 图 灵 出 版 社 ')} 
underlayColor="#E1F6FF" 
> 
<Text style={styles.item}> 图 灵 出 版 社 </Text> 

</TouchableHighlight> 

</View> 
</View> 


); 
}); 


var styles = StyleSheet.create({ 
flex:{ 
flex: 1， 
marginTop:25, 
了 
item:{ 
fontSize:18, 
marginLeft:5, 
COlor: '#434343" 
} 
}); 


AppRegistry.registerComponent('APP', () => App); 


在 上 面 的 代码 中 ， 我 们 在 Text 组 件 外 面包 了 一 个 TouchableHighlight 组 件 。 同 时 ， 我 们 在 
TouchableHighlight 组 件 上 使 用 onPress 监 听 用 户 点 击 事件 。 当 用 户 点 击 时 , 会 传人 被 点 击 的 字符 串 。 


二 


同时 我 们 设置 了 点 击 的 背景 颜色 是 # 械 1F6FF 。 按 cemd+R 快 捷 键 运行 代码 ， 得 到 的 效果 如 3-17 所 示 。 


iOS Simulator - iPhone 5 - iPhone 5 / iOS 8.2 (... 


Alert 
React Native 入 门 与 实战 


Okay 


图 3-17 ”TouchableHighlight 运 行 效果 
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3.5.2 TouchableOpacity 组 件 


TouchableOpacity 组 件 不 用 设置 背景 颜色 ， 这 样 更 加 方便 使 用 。 该 组 件 只 有 一 个 属性 
active0pacity。 这 里 我 们 通过 一 个 简单 的 例子 来 看 一 下 。 将 TouchableHighlight 符 换 成 Touchable- 


Opacity， 修 改 后 的 代码 如 下 


var App = React.createClass({ 


show: function(text){ 
alert(text); 

和 

render: function(){ 
return 


<View style={[styles.flex]}> 


<View> 
<TouchableOpaci 


ty 
onpress={this. 


show.bind(this，'React Native 入 门 与 实战 ')}> 


<Text style={styles.item}>React Native 入 门 与 实战 </Text> 


</TouchableOpaci 


<TouchableOpaci 


ty 
onpress={this. 


ty> 


show.bind(this， "图 灵 出 版 社 ')}> 


<Text style={styles.item}> 图 灵 出 版 社 </Text> 


</TouchableOpac 


<TouchableOpaci 


ty> 


ty> 


<View style={styles.btn}> 
<Text style={{fontSize:25,color: '#fff'}}> 按 钮 <(/Text> 


</View> 


</TouchableOpacity> 


</View> 
</View> 
好 
} 
上 


同时 ， 我 们 增加 了 一 个 样式 btn， 该 样式 的 内 容 如 下 : 


btn:{ 
marginLeft:30, 
marginTop:30, 
width:100, 
height:100, 


backgroundColor: #18B4FF ， 
justifyContent: “centeT ， 


alignItems: “centeT ， 
borderRadius: 50， 


3.5.3 TouchableWitho 
就 像 官网 上 所 说 的 那样 ， 


图 灵 社区 会 


utFeedback 组 件 
除非 有 很 充足 的 理由 ， 你 才 会 使 用 TouchableWithoutFeedback 组 件 ， 
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一 般 不 建议 使 用 该 组 件 。 如 果 没 有 触摸 反馈 的 话 ， 就 会 像 Web 交 互 一 样 ， 而 不 是 Native 交 互 。 
TouchableWithoutFeedback 组 件 支持 3 个 事件 ， 具 体 如 下 所 示 。 

口 onLongPress: 长 按 事件 。 

口 onPressIn: 触摸 进入 事件 。 

口 onPress0ut: 触摸 释放 事件 。 


这 里 我 们 不 过 多 介绍 TouchableWithoutFeedback 组 件 , 有 兴趣 的 读者 可 以 参考 https://facebook. 
github.io/react-native/docs/touchablewithoutfeedback.html#content。 


3.6 ”Image 组 件 


一 款 App 中 既 需 要 文本 ， 又 需要 图 片 。 就 像 HTML 提 供 了 img 元 素 一 样 ，React Native 提 供 了 
Image 组 件 。React Native 的 Image 组 件 调 用 的 图 片 的 途径 比较 多 ,例如 网 络 图 片 、 本 地 磁盘 图 片 、 
照相 机 的 图 片 等 。 


3.6.1 _ Image 组 件 介绍 


Image 组 件 是 我 们 常用 的 组 件 。 学 完 其 他 组 件 再 学 习 Image 组 件 ， 感 觉 比较 轻松 。Image 组 件 
目前 支持 的 属性 如 下 所 示 。 


口 resizeMode: 枚 举 类 型 ， 其 值 为 cover 、contain 、stretch。 表 示 图 片 适 应 的 模式 。 

D source: 图 片 的 引用 地 址 ， 其 值 为 {uri: string}。 如 果 是 一 个 本 地 的 静态 资源 ， 那 么 需 
要 使 用 require('imagelname') 包 囊 。 

口 defaultSource: iOS 支 持 的 属性 ,表示 默认 的 图 片 地 址 。 如 果 网 络 图 片 加 载 完 成 ,将 取代 
defaultSource。 
口 onLoad: iOS 文 持 的 属性 ， 加 载 成 功 时 触发 该 事件 。 
口 onLoadEnd: iOS 支 持 的 属性 ， 不 管 是 加 载 成 功 还 是 失败 ， 都 会 触发 该 事件 。 
口 onLoadstart: iOS 支 持 的 属性 ， 加 载 开 始 时 触发 该 事件 。 

口 onProgress: iOS 文 持 的 属性 ， 加 载 过 程 的 进度 事件 。 


3.6.2 ”加 载 网 络 图 片 


一 般 情 况 下 ,我 们 都 使 用 网 络 图 片 ， 因 为 网 络 图 片 容易 更 新 和 修改 。 加 载 网 络 图 片 的 方式 是 
source={uri: 'http://xxx.com/xx.png'}。 这 里 我 们 写 一 个 简单 的 图 片 浏览 器 ， 该 图 片 浏览 器 有 
两 个 按钮 :“ 上 一 张 ” 和 “下 一 张 "。 我 们 的 设计 稿 如 图 3-18 所 示 。 
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图 片 


图 3-18 图 片 浏览 器 设计 稿 
按照 设计 稿 的 需求 ， 我 们 将 该 功能 封装 成 功能 组 件 。 下 面 我 们 来 完成 该 功能 。 
React Native 不 像 Web 开 发 那样 会 默认 显示 图 片 。 在 浏览 器 中 ,图 片 的 大 小 一 开始 是 0x0， 当 
图 片 下 载 完成 后 ,会 按照 图 片 的 大 小 泻 染 ， 这 时 你 就 会 看 到 图 片 的 加 载 内 烁 , 但 这 是 不 好 的 用 户 
体验 。 因 此 ， 在 React Native 中 ，Image 组 件 的 默认 大 小 是 0， 是 不 显示 图 片 的 。 我 们 需要 给 定 图 
片 的 宽 高 或 者 知道 图 片 的 宽 高 比 才能 展示 图 片 。 因 此 , 我 们 一 开始 就 可 以 使 用 占 位 符 来 替代 ,这 
样 就 没有 了 Web 的 闪烁 。 这 里 ， 我 们 设置 主体 图 片 的 模式 为 TesizeMode="contain" ， 这 样 的 话 ， 
我 们 的 图 片 就 会 在 指定 大 小 内 自 适 应 缩放 。source 的 值 为 {uri: this.state.imgs[this.state. 
count]}， 其 中 uri 是 根据 this.state.count 变 化 的 ，this.state.count 代 表 数 组 中 的 索引 。 具 体 的 
代码 如 下 所 示 : 
var React = require('react-native'); 
var { 
StyleSheet, 
Text， 
AppRegistry, 
View, 
Image, 


TouchableOpacity, 
} = React; 


var imgs = [ 
'http://www.ituring.com.cn/bookcover/1442.796.jpg', 
‘http://www.ituring.com.cn/bookcover/1668.553.jpg', 
'http://www.ituring.com.cn/bookcover/1521.260.jpg" 
]; 


var MyImage = React.createClass({ 
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getInitialState: function(){ 
var imgs = this.props.imgs; 


return { 
imgs: imgs, 
count: 0 
}; 
}, 


goNext: function(){ 
var count = this.state.count,; 
Count ++; 
if(count < imgs.length){ 
this.setState({ 
count: count 
]); 
} 
外 
goPreview: function(){ 
var count = this.state.count; 
count --; 
if(count >= 0){ 
this.setState({ 
count: count 
]); 
} 
外 
render: function(){ 
return( 
<View style={[styles.flex]}> 
<View style={styles.image}> 
<Image style={styles.img} 
source={{uri: this.state.imgs[this.state.count]}} 
resizeMode="contain" 
/> 
</View> 
<View style={styles.btns}> 
<TouchableOpacity onpress={this.gopreview}> 
<View style={styles.btn}> 
<Text> 上 一 张 </Text> 
</View> 
</TouchableOpacity> 
<TouchableOpacity onpress={this.goNext}> 
<View style={styles.btn}> 
x<Text> 下 一 张 </Text> 


</View> 
</TouchableOpacity> 
</View> 
</View> 
); 
} 
]) 


var App = React.createClass({ 
render: function(){ 
return( 
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<View style={[styles.flex, {marginTop:40}]}> 
<MyImage imgs={imgs}></MyImage> 
</View> 


条 
3 


var styles = StyleSheet.create({ 
flex:{ 
flex: 1， 
alignItems: CenteT' 


Carrier 令 11:34 AM [ 


】， 

image:{ 
borderWidth:1, 
width:300， JavaScript 


height:200， 
borderRadius:5, 
borderColor: '#ccc', 
justifyContent:'center', 
alignItems:'center’' 

}， 

img:{ 
height:150, ; 
width:200, 上 一 张 | 下 一 张 


} 

btns:{ 
flexDirection: 'row', 
justifyContent: 'center', 
marginTop:20 

}， 

btn:{ 
width:60, 
height:30， 
borderColor: “#0089FF ， 
borderWidth: 1， 
justifyContent: 'center', 
alignItems:'center', 
borderRadius:3, 
marginRight:20, 


和 
起 
完成 的 效果 如 图 3-19 所 示 。 图 3-19 ”图片 浏览 


3.6.3 加载 本 地 图 片 


在 3.6.2 节 中 ， 我 们 介绍 了 如 何 加 载 网 络 图 片 ， 这 一 节 将 学 习 如 何 使 用 本 地 图 片 。 很 多 时 候 ， 
我 们 想 使 用 本 地 图 片 ， 但 不 希望 搭建 静态 文件 服务 器 。React Native 提 供 了 静态 图 片 的 调用 方式 : 


source={require('image!my-icon' )}。 


React Native 提 供 本 地 图 片 的 加 载 方式 的 同时 ， 也 给 出 了 建议 : 
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// 好 的 加 载 方式 

<Image source={require('image!my-icon')} /> 

// 不 好 的 加 载 方 式 

Var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive'; 


<Image source={require('image!' + icon)} /> 


// 好 的 加 载 方式 
var icon = this.props.active ? require('image!lmy-icon-active') : require('image!my-icon-inactive'); 
<Image source={icon} /> 


React Native 和 希望 我 们 使 用 第 一 种 和 第 三 种 方式 来 加 载 本 地 图 片 。 因 为 在 将 来 打包 静态 资源 
的 过 程 中 , 第 一 种 和 第 三 种 方案 可 以 很 容易 找 出 静态 资源 ,而 不 是 运行 时 去 分 析 静 态 资源 。 虽 
第 二 种 方案 在 当下 也 是 可 行 的 ， 但 是 React Native 还 是 建议 我 们 遵守 第 一 种 和 第 三 种 的 代码 规范 。 
要 在 项 目 中 添加 本 地 图 片 ，Xcode 提 供 了 个 简单 的 方式 ， 那 就 是 直接 将 图 片 拖 人 到 
Images.xcassets 中 ， 如 图 3-20 所 示 。 但 是 这 需要 重新 启动 模拟 器 才能 起 作用 ， 才 能 看 到 效果 。 
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: Create anew Image Setin Images.xcassets ' 
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rc 掉 og 
es _b00 
ET 
” HelloWord 
main abundle ph 全 re Ensure that - 
hi AppDelegate Images.xcassets is 
Universal 


included in your project ; 


roon -xb modes cascet 5 
m manJ 和 才 国 sm mn whHolloWorid//OS/Images xcassets/iogoimageset 
ui ee ee 站 全 lS et Membership 
» Uaed < * 豆 国 'o#-im-ij hio < A Hosoworg 
» Ml Produed Favomes h AppDelegate.h Applcon apoiconset » Contents.json OO HenoworidTests 
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园 Al My Fie: Base prol » reactimageset » MM iogo-2.png Source Control 
iCloud Drive xCassets Twitter mageset 出 logo.png Repository HelloWorid 
人 AirDrop Info.plist Tipe GR 
main nh Ee 
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国 Destop ”Dragyourimages into the 1X, 2x, 3x boxes, dn 
al Gooole ot Make sure that at least one filename is the ce 首 革 Pa 
Bl 
屿 Decument Same as the Image Set name Imagoe xcassets 
©@ Downioad- 


图 3-20 ”加 载 本 地 图 片 


React Native 计 划 后 期 让 图 片 支持 sprite( 图 片 精灵 或 者 雪 政 图 ), 例如 可 以 这 样 使 用 : {uri: .….， 
crop: {left: 10, top: 50, width: 20, height: 40}}。 


3.7 TabBarlOS 组 件 


我 们 经 常会 用 到 的 一 个 功能 就 是 Tab 切 换 。React Native 就 提供 了 该 功能 组 件 : TabBarIOS 和 
TabBarIOS.Item。TabBarIOS 组 件 就 是 为 切换 不 同 页 面 ( 视图 或 者 路 由 ) 产生 。 因 此 ，App 中 主体 
功能 的 切换 基本 上 都 是 使 用 TabBarIOS 组 件 。TabBarIOS.Item 是 TabBarIOS 的 附属 组 件 。 


3.7.1 TabBarlOS 组 件 介 绍 
TabBarIOS 组 件 的 属性 比较 少 ， 主 要 有 3 个 ， 如 下 所 示 。 
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口 barTintColor: Tab 栏 的 背景 颜色 。 
口 tintColor: 当 我 们 选中 了 某 一 个 Tab 时 ， 该 Tab 的 图 标 颜 色 。 
口 translucent: Tab 栏 是 否 透 明 。 


TabBarIOS.Item 组 件 是 TabBarIOS 组 件 的 某 一 项 Tab ， 支 持 如 下 属性 。 


口 badge: 红色 的 提示 数字 ， 可 以 用 作 消 息 提醒 。 

口 icon: Tab 的 图 标 ， 如 果 不 指定 ， 默 认 显示 系统 图 标 。 

口 onPress: 点 击 事 件 。 当 某 个 Tab 被 选中 时 ， 需 要 改变 该 组 件 的 selected={true} 设 置 。 

口 selected: 是 否 选中 某 个 Tab。 如 果 其 值 为 true， 则 选中 并 且 显示 子 组 件 。 

口 selectedIcon: 选中 状态 的 图 标 ， 如 果 为 空 ， 则 将 图 标 变 为 蓝 色 。 

口 systemIcon: 系统 图 标 , 其 值 是 枚 举 类 型 , 可 选 值 有 'bookmarks'、'contacts'、'downloads'、 
‘favorites' 、'featured' 、'history'、 'more'、 'most-recent'、 'most-viewed'、'recents'、 


'search' 和 'top-rated'。 
口 title: 标题 。 它 会 出 现在 图 标底 部 。 当 我 们 使 用 了 系统 图 标 时 ， 将 会 忽略 该 标题 。 


3.7.2 案例: 类 QQ Tab 切换 
这 里 我 们 举 一 个 常用 的 例子 一 一 QQ 的 Tab 切 换 ， 如 图 3-21 所 示 。 


eeeee 中 国联 通 仿 13:30 


好 友 动 态 附近 兴趣 部 落 


群 与 活动 


A 和 

售 ”吃喝 玩 乐 

纺 同城 有 8 生 i 
消息 联系 人 食 


图 3-21 QQ 
这 里 我 们 需要 完成 QQ App 的 “消息 ”、“ 联 系 人 ”和 “动态 ”的 Tab 切 换 。 这 里 我 们 使 用 的 图 
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标 可 以 到 以 下 3 个 地 址 下 载 。 


口 “消息 ”图 标 : http://vezero.github.io/ctrip/message.png。 
口 “联系 人 ”图 标 : http:/vczero.github.io/ctrip/phone.png。 
口 “动态 ”图 标 : http://veczero.github.io/ctrip/star.png。 


首先 ， 加 载 TabBarOS 组 件 ， 然 后 使 用 TabBarIOS 和 TabBarIOS.Item 进 行 布局 。 这 里 对 于 
TabBarIOS.Item 的 图 片 ， 我 们 需要 引用 本 地 图 片 。React Native 的 TabBarIOS 对 图 标 进行 了 处 理 。 
当 我 们 选择 某 个 Tab 时 显示 蓝 色 图 标 ， 而 没有 选择 的 图 标 会 是 灰色 。 这 里 我 们 不 用 管 图 片 本 来 的 
颜色 ，TabBarIOS 对 图 标的 颜色 进行 了 统一 处 理 。 这 是 一 个 很 好 的 特性 ， 用 起 来 很 方便 。 我 们 的 
具体 代码 如 下 : 


var React = require('react-native'); 
var Dimensions = require('Dimensions'); 
var { 

StyleSheet, 

Text， 

AppRegistry, 

View, 

Image, 

ScrollView, 

TabBarIOS ， 
} = React; 


var Width = Dimensions.get('window').width; 
var height = Dimensions.get('window').height - 70; 
var App = React.createClass({ 
getInitialState: function(){ 
return { 
tab: message 
}; 
)， 
select: function(tabName){ 
this.setState({ 
tab: tabName 
]); 
)， 
Trender: function(){ 
return( 
<TabBarIO9 style={styles.flex}> 
<TabBar10S.Item 
title=" 消 息 " 
icon={require("image!message")} 
onpress={this.select.bind(this, 'message')} 
selected={this. state.tab === 'message'}> 
<ScrollView> 
<View style={styles.message}> 
<Text style={styles.message title}> 南 山南 </Text> 
<Text> 
他 不 再 和 谁 谈论 相逢 的 缴 岛 ， 因 为 心里 早已 荒芜 人 烟 
他 的 心里 再 装 不 下 一 个 家 ， 做 一 个 只 对 自己 说 议 的 哑巴 ， 他 说 
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你 任何 为 人 称道 的 美丽 ， 不 及 他 第 一 次 遇见 你 
时 光 苛 区 残 喘 无 可 奈何 
如 果 所 有 土地 连 在 一 起 ， 走 上 一 生 只 为 去 拥抱 你 
喝 醉 了 他 的 梦 ， 晚 安 
有 天 他 听见 有 人 唱 着 古老 的 歌 ， 唱 着 今天 还 在 远方 发 生 的 
像 在 她 眼睛 里 看 到 的 孤岛 ， 没 有 悲伤 但 也 没有 花 采 
你 在 南方 的 艳阳 里 大 雪 纷 飞 ， 我 在 北方 的 案 夜 里 四 季 如 春 
如 果 天 黑 之 前 来 得 及 ， 我 要 忘 了 你 的 眼睛 
穷 极 一 生 做 不 完 一 场 梦 
大 梦 初 醒 荒唐 了 这 一 生 
南山 南 ， 北 秋 翡 
南山 有 合 堆 
南 风 喃 ， 北 海北 
北海 有 墓碑 
</Text> 
</View> 
</ScrollView> 
</TabBarI0S. Item> 
<TabBar10S. Item 
title=" 联 系 人 " 
icon={require("image!phone")} 
onPress={this.select.bind(this， 'phonelist')} 
selected={this.state.tab === 'phonelist'}> 
<ScrollView> 
<Text style={styles.1ist}> 
<Text> 唐 三 藏 </Text> 
<Text>131-8904-9077</ 
</Text> 
<Text style={styles.1ist}> 
<Text> 孙 悟空 </Text> 
<Text>131-8904-9078</ 
</Text> 
<Text style={styles.1ist}> 
<Text> 猪 八 戒 /Text> 
<Text>131-8904-9079</ 
</Text> 
<Text style={styles.1ist}> 
<Text> 沙 和 和尚/Text> 
<Text>131-8904-9080</ 
</Text> 
</ScrollView> 
</TabBar10S. Item> 
<TabBar10S. Item 
title=" 动 态 " 
icon={require("image!star")} 
onpress={this.select.bind(this, 'star')} 
selected={this.state.tab === 'star'}> 
<ScrollView style={styles.flex}> 
<Image style={{width:width, height:height}} 
source={{uri:'http://vczero.github.io/ctrip/star page.jpg' }}/> 
</ScrollView> 
</TabBarI0S. Item> 
</TabBar10S> 


); 


ext> 


ext> 


ext> 


ext> 
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} 

]); 

var styles = StyleSheet.create({ 
flex:{ 

flex:. 人 7 

外 
message:{ 


alignItems:'center', 
marginLeft:5, 
marginRight:5, 

外 

message title:{ 
fontSize:18, 
color: “#18B5FF ， 
marginBottom:5, 


了 
13st:{ 
height:30, 
fontSize:15, 
marginLeft:10, 
marginTop:10, 
} 
]) 
AppRegistry.registerComponent('APP', 


同时 ， 我 们 在 TabBarIOS.Item 上 添加 了 如 下 几 个 


() => App); 


性 。 


el 


口 title: 表示 Tab 图 标 下 面 的 小 标题 。 
口 icon: 表示 图 标 ， 这 里 使 用 require("imagelmessage") 引 用 。 
D selected: 表示 当前 Tab 项 是 否 选中 ， 如 果 选 中 ， 图 标 将 


会 变 蓝 色 。 


我 们 需要 做 Tab 切 换 的 效果 就 是 改变 TabBarIOS.Item 中 selected 属 性 的 值 。 如 果 selected 为 
true， 则 选中 当前 的 Tab。 此 外 ,我们 在 初始 化 的 时 候 添 加 一 个 


当前 选中 的 TabBarIOS.Item 的 字符 串 名 称 。 我 们 在 selected 上 做 一 
2 


{this.state.tab === "message'}， 如 


E 
信 


相等 ， 则 说 明 选 中 。 


= 


届 性 : 


村 
疝 


nl 


this.state.tab。tab 表 示 
个 简单 的 判断 selected= 


此 需要 添加 onPress 事 件 , 传递 不 同 的 字符 串 来 修改 this.state.tab， 从 而 触发 选中 。 如 果 选 中 ， 


TabBarIOS.Item 的 子 节点 将 会 


显示 出 来 ， 而 其 他 的 TabBarIOS.Item 子 节点 将 隐藏 。 同 时 我 们 使 用 


Dimensions 获 取 了 屏幕 的 宽 高 ， 以 便 我 们 展示 全 屏 图 片 。 完 整 代码 可 以 参考 https://github.com/ 
Vczero/React-Native-Code 项 目的 第 3 章 3.7 节 。 最 终 完 成 的 简单 效果 如 图 3-22 所 示 。 
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iOS Simulator - iPhone 4s - iPhone 4s / iOS 8.…. 
Carrier 全 10:55 PM mw 


他 不 再 和 谁 谈论 相逢 的 孤岛 ， 因 为 心里 早已 荒芜 人 
烟 他 的 心里 再 装 不 下 一 个 家 ， 做 一 个 只 对 自己 说 
说 的 哑巴 ， 他 说 你 任何 为 人 称道 的 美丽 ， 不 及 他 
第 一 次 遇见 你 时 光 荀 延 残 喘 无 可 奈何 如 果 所 有 土 
地 连 在 一 起 ， 走 上 一 生 只 为 去 拥抱 你 喝 醉 了 他 的 
梦 ， 晚 安 有 天 他 听见 有 人 唱 着 古老 的 歌 ， 唱 着 今 
天 还 在 远方 发 生 的 像 在 她 眼睛 里 看 到 的 孤岛 ， 没 
有 悲伤 但 也 没有 花朵 你 在 南方 的 艳阳 里 大 雪 纷 
飞 ， 我 在 北方 的 寒 夜 里 四 季 如 春 如 果 天 黑 之 前 来 
得 及 ， 我 要 忘 了 你 的 眼睛 穷 极 一 生 做 不 完 一 场 梦 
大 梦 初 醒 荒 唐 了 这 一 生 南山 南 ， 北 秋 翡 南山 有 谷 
堆 南 风 喃 ， 北 海北 北海 有 墓碑 


四 人 让 


图 3-22 ”TabBarIOS 组 件 演 示 效 果 


3.8 WebView 组 件 


很 多 时 候 我 们 需要 在 App 中 区 入 一 个 活动 页 ， 那么 什么 样 的 方式 最 为 合适 呢 ? 我 们 需要 不 定 
时 上 一 个 活动 ， 又 需要 不 定时 结束 一 个 活动 。 如 果 使 用 Native 方 式 的 话 ， 需 要 更 新 App。 这 对 于 
用 户 来 说 ， 是 个 很 不 好 的 体验 。 因 此 ，WebView 组 件 可 以 帮助 我 们 解决 这 个 问题 。 目 前 ， 主流 的 
Hybird 开 发 也 是 基于 WebView 来 实现 的 ， 下 面 简要 介绍 这 个 组 件 。 


3.8.1 WebView 组 件 介绍 


目前 ，React Native 的 版 本 是 v0.10.0-rc，WebView 的 功能 基本 能 满足 需求 。 目 前 ，WebView 
组 件 支持 的 属性 如 下 。 


口 automaticallyAdjustContentInsets: 表示 是 否 自动 调整 内 部 内 容 , 其 值 为 true 或 者 false。 
口 bounces : 回 弹 效果 。 如 果 其 值 为 false, 则 内 容 拉 到 底部 或 者 头 部 不 回 弹 。 其 默认 值 为 true。 
口 contentInset: 内 部 内 容 偏 移 值 ， 该 值 为 一 个 JavaScript 对 象 {top: number, left: numbeT， 
bottom: number, right: number}。 

口 html: HTML 代 码 字 符 串 。 如 果 传 人 了 HTML 代 码 字 符 串 ， 则 泻 染 该 HTML 代 码 。 

口 injectedJjavaScript: 注入 的 JavaScript 代 码 ， 其 值 为 字符 串 。 如 果 加 上 了 该 属性 ， 就 会 在 
WebView 里 面 执行 JavaScript 代 码 。 

口 onNavigationStateChange: 监听 导航 状态 变化 的 函数 。 

口 renderError: 监听 深 染 页 面 出 错 的 函数 。 
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口 startInLoadingState: 是 否 开启 页 面 加 载 的 状态 ， 其 值 为 true 或 者 false。 

口 renderLoading: WebView 组 件 正 在 泻 染 页 面 时 触发 的 函数 ， 需 要 同 startInLoadingState 
一 起 使 用 。 当 startInLoadingSstate 为 true 时 该 函数 才 起 作用 。 
D scrollEnabled: 表示 WebView 里 面 页 面 是 否 能 深 动 , 如 果 其 值 为 true 表 示 可 以 滚动 , false 
表示 禁止 滚动 。 

口 onNavigationStateChange: 页 面 导航 状态 改变 时 ， 触 发 该 事件 监听 。 

D scalesPageToFit: 按照 页 面 比例 和 内 容 宽 高 比例 自动 缩放 内 容 。 


3.8.2 ”案例 : 使 用 WebView 组 件 加 载 微 博 页 面 


我 们 可 以 使 用 WebView 做 一 些 简单 的 营销 活动 页 面 。 但 是 这 里 我 不 好 找 一 个 营销 页 面 ， 因 为 
营销 活动 会 不 断 变 化 ， 一 下 线 演示 就 不 起 作用 了 。 所 以 ， 这 里 使 用 的 是 新 浪 微 博 的 Web App 作 为 
内 舰 页面 ， 主 要 为 了 展示 WebView 的 用 法 。 将 新 浪 微 博 的 Web App 在 手机 上 全 屏 显 示 ， 然 后 注入 
一 名 alert(' 欢 迎 使 用 React Native') 的 JavaScript 代 码 ,， 并 且 去 掉 上 拉 下 拉 回 弹 的 效果 ,具体 的 代 
码 如 下 所 示 : 


Var React = require('react-native'); 
var Dimensions = require('Dimensions'); 


var { 
AppRegistry, 
StyleSheet, 
Text， 
WebView, 
View, 

} = React; 


var width = Dimensions.get('window').width; 
var height = Dimensions.get('window').height; 


var App = React.createClass({ 
render: function() { 
return ( 
<View style={styles.container}> 
<WebView 
injectedJavaScript="alert(' 欢 迎 使 用 React Native')" 
bounces={false} 
url="'http://weibo.com/vczero" 
style={{width:width,height:height}}> 
</WebView> 
</View> 
); 
} 
]); 


var styles = StyleSheet.create({ 
container: { 
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flex: 1 


} 
DD 


AppRegistry.registerComponent('APP', () => App); 
这 里 我 们 使 用 Dimensions 来 获取 设备 的 宽度 和 高 度 。 我 们 将 获取 到 的 宽度 和 高 度 给 WebView， 
这 样 就 会 全 屏 显 示 ， 最 终 的 运行 效果 如 图 3-23 所 示 。 


iOS Simulator - iPhone 5s - iPhone 5... 
Carrier 倒 10:28 AM mp 


要 时 


© 


详细 250 263 217 v 
资料 微 博 关注 粉丝 


@ 加 和 餐 饭 sr: 天 价 龙虾 算 什么 ， 抚 仙 湖 禄 充 景 


区 血泪 游 : 则 从 医院 回来 ， 就 看 见 漫天 都 是 青 

岛 天 价 龙虾 黑幕 揭露 ， 看 到 这 一 则 消息 ， 老 范 
器 了 ,说 到 黑 ， 说 到 坑 ， 什 么 天 价 龙虾 ， 比 起 
老 范 的 遭遇 来 ， 都 特 么 弱 爆 了 。 话 …( 发 自 @ 


微 博 桌面 罗 微 博 桌面 首页 ) 
图 3-23 ”新 浪 微 博 
如 果 想 加 入 自己 的 HTML 代 码 片 段 ， 只 需要 使 用 html 属 性 即 可 。 例 如 我 们 ， 加 载 一 个 全 屏 的 
图 片 ， 可 以 使 用 
html="<div><img src="http://vczero.github.io/ctrip/star page.jpg"/></div>" 
得 到 一 张大 图 ， 同 时 使 用 contentInset 去 掉 留 白 ， 将 scrollEnabled 设 为 false 来 禁止 滚动 。 具 体 
的 代码 如 下 所 示 : 


var React = require('react-native'); 
var Dimensions = require('Dimensions'); 


var { 
AppRegistry, 
StyleSheet, 
Text， 
WebView, 
View, 

} = React; 
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var width = Dimensions.get('window').width; 
var height = Dimensions.get('window').height; 


var App = React.createClass({ 
render: function() { 
return ( 
<WebView 
contentInset={{left:-10, top:-28}} 
scrollEnabled={false} 
html="'<div><img src="http://vczero.github.io/ctrip/star page.jpg"/></div>" 
style={{width:width,height:height}}> 
</WebView> 


); 
}); 


AppRegistry.registerComponent('APP', () => App); 


3.8.3 案例: 新 浪 微 博 OAuth 认证 


很 多 时 候 我 们 需要 调用 开放 平台 , 但 是 不 想 虞 和 信 SDK， 只 需要 数据 。 因 此 ， 选 择 WebView 来 
获取 accessToken 是 一 个 很 好 的 选择 ， 具 体 代 码 如 下 : 


var React = require('react-native'); 
var { 

AppRegistry, 

StyleSheet, 

Text， 

View, 

WebView 

} = React; 


var appKey = “4263807830 ; 

var callback = 'http://127.0.0.1:3000'; 

var url = 'https://api.weibo.com/oauth2/authorize?client id=" + 
appKey + '&redirect uri=' + callback; 


module.exports = React.createClass({ 
getInitialState: function(){ 
return { 
code: nul 
}; 
)， 
render: function(){ 
return ( 
<View style={styles.container}> 
{ 
!this.state.code ? 
<WebView style={styles.container} url={url} 
onNavigationStateChange={this.navChange}/> 
:<Text>{this. state.code}</Text> 
} 
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</View> 
); 
}, 
navChange: function(state){ 
var that = this; 
if(state.url.indexOof(callback + "/?code=") > -1){ 
var code = state.url.split('?code=")[1]; 


//TODO: 这 里 可 以 使 用 code 去 交换 accessToken 
_that.setState({ 


code: code 
1 
} 


}); 


var styles = StyleSheet.create({ 
container:{ 
flex:1 
} 
]); 


这 里 使 用 的 是 测试 的 key。 关 于 OAuth 接 口 的 信息 ， 可 以 前 往 新 浪 微 博 开 放 平 台 (http:/open. 
weibo.com/ ) 查看 。 我 们 在 WebView 上 使 用 了 onNavigationSstateChange 事 件 监 听 。onNavigation 
StateChange 的 作用 是 当 发 现 浏 览 器 地 址 改变 时 ， 触 发 事件 。 在 navChange 函 数 中 ， 我 们 判断 是 否 
已 经 正确 跳 转 到 回调 地 址 。 如 果 跳 转正 确 , 则 获取 code， 最 后 通过 code 去 获取 accessToken。 新 浪 
微 博 OAuth 认 证 登录 界面 如 图 3-24 所 示 。 


Gamer 2:50 PM i 


OEE 2 


授权 Node 封 装 API 访问 你 的 微 博 帐号 


Done 


图 3-24 ”登录 界面 
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第 3 章 介绍 了 React Native 的 常用 组 件 ， 运 用 这 些 组 件 可 以 完成 很 多 我 们 需要 的 UI 界 面 和 功 
能 。 其 实 , 在 第 3 章 的 一 些 案例 中 , 我 们 已 经 提前 用 过 一 些 API。 因 此 ， 只 有 配合 使 用 React Native 
的 常用 组 件 和 常用 API， 才 能 更 好 地 开发 应 用 程序 。 在 这 一 章 中 ,我 们 将 着 重 介绍 React Native 的 
常用 API。 为 了 更 容易 理解 和 学 习 每 个 API， 我 们 通过 示例 来 介绍 它们 。 


4.1 AppRegistry 


每 一 个 应 用 程序 的 运行 都 有 一 个 入 口 文件 或 者 入 口 函 数 ， 而 在 React Native 中 ，AppRegistry 


就 肩负 着 这 样 的 责任 。 


4.1.1 AppRegistry 介绍 


AppRegistry 负 责 注册 运行 React Native 应 用 程序 的 JavaScript 入 口 。 我 们 的 应 用 程序 的 人 口 组 


件 需 要 使 用 AppRegistry.registerComponent 来 


注册 。 当 注册 完 应 用 程序 组 件 后 ，Native 系 统 


(Objective-C ) 就 会 加 载 jsbundle 文 件 并 且 触 发 AppRegistry.runApplication 运 行 应 用 。 AppRegistry 


有 以 下 的 方法 。 


组 件 。 


4.1.2 ”AppRegistry 示例 


D registerConfig(config: Array<AppConfig>): 静态 方法 ， 注 册 配 置 。 
口 registerComponent(appKey: string, getComponentFunc: ComponentProvider): 注册 入 口 


口 registerRunnable(appKey: string，func: Function): 注册 函数 监听 。 
口 getAppKeys() : 获取 registerRunnable 注 册 的 监听 键 。 
D runApplication(appKey: string, appParameters: any): 运行 App。 


在 前 3 章 中 ,我们 都 使 用 了 AppRegistry.registerComponent 消 数 。 如 : 
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AppRegistry.registerComponent('App', () => App); 


其 实 ，AppRegistry 的 用 法 就 是 这 么 简单 。 我 们 希望 了 解 更 多 ， 因 此 ,我们 进一步 探索 。 
应 用 的 时 候 ， 我 们 会 在 Xcode 的 日 志 输 出 栏 中 看 到 如 下 信息 : 


2015-09-04 16:22:24.884 [infol][tid:com.facebook.React.JavaScript] 
"Running application "App” with appParams: {"rootTag":1, 
"initialprops":{}}. _DEV === true, development-level 
warning are ON, performance optimizations are OFF' 
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局 动 


其 实 ， 上 面 的 日 志 是 由 runApplication 打 印 出 来 的 。 在 代码 中 加 入 alert(AppRegistry.run 


ne ， 看 一 下 runApplication 函 数 的 定义 : 


alert(AppRegistry.runApplication); 
AppRegistry.registerComponent('App', () => App); 


我 们 打印 出 来 的 函数 定义 如 图 4-1 所 示 。 


© © iOS Simulator -iPhone 5s -iPhone 5... 


Alert 


function (appKey, appParameters) { 
console.log( 
"Running application ” + appKey 二 > 
with appParams: ' + 
JSON. stringify(appParameters) 十 "十 
DEV_ ==='+ String(_DEV_) 十 
', development-level warning are “+ 
(_DEV_?'ON':'OFF')+ 
', performance optimizations are ' + 
EDEVES NOPF ON 


invariant( 
runnables[appKey] && 
runnables[appKey].run, 
'Application ' + appKey + ' has not 
been registered. This ' + 
'is either due to a requirel() error during 
initialization ' + 
'or failure to call 
AppRegistry.registerComponent."); 


runnables[appKey].run(appParameters); 
} 


OK 


图 4-1 runApplication 函 数 的 定义 


可 以 看 到 ，runApplication 函 数 中 console.1og() 打 印 的 正 是 我 们 启动 App 时 的 日 志 。 当 然 ， 
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也 可 以 使 用 registerRunnable 注 册 一 些 AppKey， 示 例 代码 如 下 : 


AppRegistry.registerRunnable('vczero', function(){ 
console.log('vczero'); 

Ds 

AppRegistry.registerRunnable('react-native', function(){ 
console.log('react-native'); 

}; 

alert(AppRegistry.getAppKeys()); 


4.2 AsyncStorage 


AsyncStorage 是 一 个 简单 的 、 具 有 异步 特性 的 键 值 对 的 存储 系统 。 相 对 整个 App 而 言 ， 它 是 
全 局 的 ， 应 该 用 于 替代 LocalStorage。 


4.2.1 AsyncStorage 介绍 


AsyncStorage 提 供 了 比较 全 的 方法 供 我 们 使 用 。 每 个 方法 都 有 一 个 回调 函数 ， 而 回调 函数 的 
第 一 个 参数 都 是 错误 对 象 。 如 果 发 生 错误 ,该 对 象 就 会 展示 错误 信息 ， 否 则 为 null1。 所 有 的 方法 
执行 后 ， 都 会 返回 一 个 Promise 对 象 。 具 体 的 方法 如 下 所 示 。 
口 static getItem(key: string，callback:(error，result)): 根据 键 来 获取 值 ， 获 取 的 结 
果 会 在 回调 函数 中 。 
D static setItem(key: string, value: string，callback:(error)): 设置 键 值 对 。 
口 static removeItem(key: string，callback: (error)): 根据 键 移 除 一 项 。 
口 static mergeItem(key: string, value: string, callback:(error)): 合并 现 有 值 和 输入 值 。 
口 static clear(callback: (error)): 清除 所 有 的 项 目 。 
口 static getAllKeys(callback: (error)): 获取 所 有 的 键 。 
口 static multiGet(keys，callback: (errors, result)): 获取 多 项 ， 其 中 keys 是 字符 串 数组 。 
口 static multiSet(keyValuePairs，callback: (errors)): 设置 多 项 ， 其 中 keyValuePairs 是 
字符 串 的 二 维 数组 。 
口 static multiRemove(keys，callback: (errors)): 删除 多 项 ， 其 中 keys 是 字符 串 数 组 。 
口 static multiMerge(keyValuePairs，callback:(errors)) : 多 个 键 值 对 合并 ， 其 中 

keyVvaluepairs 是 字符 串 的 二 维 数组 。 


4.2.2 案例 : 购物 车 


在 网 上 购物 的 时 候 , 经 常会 用 到 购物 车 , 我 们 需要 将 比较 中 意 的 商品 添加 到 购物 车 ,等 我 们 
需要 付款 的 时 候 点 击 购物 车 即 可 购买 。 购 物 车 不 仅 方便 了 客户 存储 需要 购买 的 物品 ,而 且 在 某 种 
程度 上 给 公司 带 来 了 流量 和 交易 的 可 能 。 这 里 我 们 以 购物 车 为 例 来 说 明 AsyncStorage 的 用 法 。 我 
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们 创建 的 原型 图 如 图 4-2 所 示 。 


山 核桃 100 100g x1 份 


小 碗 8 件 套 ¥Y120 x2 份 


去 结算 计 340 元 ， 去 支付 
42 购物 车 原型 4 


我 们 按照 以 下 步骤 来 完成 购物 车 。 
1. 数据 模型 构建 


这 里 以 购买 水 果 为 例 定 义 一 个 商品 数组 。 其 实 , 在 真实 的 开发 中 , 都 是 从 服务 端 获 取 数 据 列 
表 ， 这 里 我 们 使 用 静态 数据 ， 相 关 代码 如 下 所 示 : 


var Model = [ 
{ 
Ld ly 
title: “ 佳 沛 新 西 兰 进口 猕猴 桃 ， 
desc: '12 个 装 "， 
price: 99， 
url: 'http://vczero.github.io/ctrip/guo_ 1.jpg' 
}， 
{ 
Eo hae 
title: ' 墨 西 哥 进口 牛 油 果 '， 
desc: '6 个 装 "， 
price: 59， 
url: 'http://vczero.github.io/ctrip/guo 2.jpg' 
}， 
{ 
id:'3', 
title: ' 美 国 加 州 进口 车 厘 子 '， 
desc: '1000g', 
price: 91.5, 
url: 'http://vczero.github.io/ctrip/guo 3.jpg 
}， 
{ 
id:'4', 
title: ' 新 疆 特产 西 梅 '， 
desc: '1000g', 
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price: 69， 

url: 'http://vczero.github.io/ctrip/guo 4.jpg 
]， 
{ 

Ld: De 

title: ' 陕 西 大 荔 冬 束 '， 

desc: “2000g ， 

price: 59.9， 

url: 'http://vczero.github.io/ctrip/guo 5.jpg" 


dl:26 5 
title: “南非 红心 西 柚 ， 
desc: '2500g', 
price: 29.9， 
url: 'http://vczero.github.io/ctrip/guo 6.jpg 
} 
]; 


2. 列表 项 组 件 
列表 项 组 件 主要 用 于 泻 染 商品 的 图 片 和 名 称 ， 相 关 代 码 如 下 所 示 : 


var Item = React.createClass({ 
render: function(){ 
return( 
<View style={styles.item}> 
<TouchableOpacity onpress={this.props.press}> 
<Image 
resizeMode="contain" 
style={styles. img} 
source={{uri:this.props.url}}> 
<Text numberOfLines={1} style={styles.item text}> 
{this.props.title}</Text> 


</Image> 
</TouchableOpacity> 
</View> 
); 
} 
]) 


这 里 我 们 在 TouchableOpacity 组 件 上 绑 定 了 点 击 事件 ， 该 事件 由 父 组 件 传 递 。 当 点 击 时 ， 该 
条 商品 就 被 添加 进 购物 车 中 。Image 组 件 上 的 resizeMode 属 性 表示 图 片 缩放 的 模型 ， 这 里 我 们 使 
用 “contain”,， 即 图 片 会 自 适 应 在 所 在 容器 中 。source 属 性 表示 图 片 的 地 址 。 同 时 , 我 们 使 用 Text 
组 件 来 展示 商品 的 标题 , 该 标题 由 父 组 件 传 递 。 这 里 使 用 了 number0fLines={1}， 如 果 标 题 超过 一 
行 ， 则 会 以 省 略 号 (... ) 的 形式 展示 剩余 的 文本 。 

3. 列表 组 件 

列表 组 件 会 使 用 Item 组 件 来 演 染 列表 ， 并 且 列 表 是 将 两 张 图 片 并 排 显示 ， 具 体 代 码 如 下 : 


var List = React.createClass({ 
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getInitialState: function(){ 
return{ 
count:0 
}; 
}, 
componentDidMount: function(){ 
var that = this; 
AsyncStorage.getAllKkeys(function(err, keys){ 
if(err){ 
//TODO: 存储 取 数 据 出 错 
// 给 用 户 提示 错误 信息 
} 
// 将 存储 的 商品 条 数 反 应 到 按钮 上 
that.setState({ 
count: keys.length 
]); 
]); 
} 


render: function() { 
var ist =" |; 
for(var i in Model){ 
if(i % 2 === 0){ 
var row = ( 
<View style={styles.row} key={i}> 
<Item url={Model[i].url} 
title={Model[i].title} 
press={this.press.bind(this, Model[i])}></Item> 
<Item 
url={Model[parseInt(i)+1].url} 
title={Model[parseInt(i)+1].title} 
press={this.press.bind(this, Model[parseInt(i)+1])}></Item> 


</View>); 
list.push(row); 
} 
} 
var count = this.state.count; 
var str = null; 
if(count){ 
str = ',， 共 '+ count + ' 件 商品 '; 
} 
return ( 
<ScrollView style={{marginTop:10}}> 
{1ist} 
<Text onpress={this.goGouWu} style={styles.btn}> 去 结算 {str}</Text> 
</ScrollView> 
); 
}, 


goGouWu: function(){ 
this.props.navigator.push({ 
component: GouWu, 
title:' 购 物 车 ' 
]); 
}, 
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press:function(data){ 
var count = this.state.count; 
Count ++; 
// 改 变数 字 状 态 
this.setState({ 
count: count 


]); 
//AsyncStorage 存 储 
AsyncStorage.setItem('SP-' + this.genId() + '-SP', JSON.stringify(data), function(err){ 
if(err){ 
//TODO: 存储 出 错 


]); 
所 
// 生 成 随机 ID: GUID 
//GUID 生 成 的 代码 来 自 于 Stoyan Stefanov 
genId:function(){ 
return “XXXXXXXX-XXXX-4XXX-yXXX-XXXXXXXXxXXXX" .Teplace(/[xy]/g，function(c) { 
var r = Math.random() * 16 | 0， 
V=CcC== 'xXx" ?I: (r& ox3 | Ox8); 
return v.toString(16); 
}) .toUpperCase(); 
} 
]); 
在 上 述 代 码 中 ， 我 们 在 render 方 法 中 通过 循环 Model 泻 染 列 表 项 。 这 里 使 用 i % 2 === 0 来 换 
行 ， 并 且 给 Item 组 件 传递 了 url1、title 和 press 属 性 。 在 press 方 法 中 ， 我 们 将 购物 车 商品 的 数量 
+1。 同 时 ， 我 们 使 用 了 AsyncStorage.setItem 将 选中 的 商品 数据 添加 到 App 本 地 存储 中 。 这 里 之 
所 以 使 用 sp- 为 前 缀 、-sp 为 后 缀 ,采用 GUID 为 存储 的 键 各 的 一 部 分 ， 是 为 了 区 分 其 他 数据 。 这 
样 做 的 好 处 有 两 个 ， 具 体 如 下 所 示 。 


口 可 以 区 分 用 户 数据 ， 例 如 username 等 信息 。 
口 可 以 防止 key 值 重复 ， 保 证 同名 商品 都 能 被 添加 进 购 物 车 。 
这 样 ， 我 们 就 完成 了 商品 信息 的 存储 。 
我 们 在 componentDidMount 方 法 中 也 做 了 一 件 比 较 重 要 的 事 , 那 就 是 当 用 户 第 二 次 进入 App 并 
且 未 支付 的 情况 下 ， 告 诉 用 户 目 前 购物 车 中 有 多 少 件 商品 。 这 里 直接 使 用 AsyncStorage. 
getAllkeys 获 取 数 据 的 条 数 。 其 实在 实际 开发 中 , 需要 根据 前 级 ( SP- ) 和 后 级 ( 一 SP ) 来 判断 是 
否 是 商品 数据 。 
我 们 使 用 了 Text 组 件 作 为 “去 结算 ”按钮 。 因 为 Text 组 件 是 可 以 绑 定 onPress 事 件 的 ， 所 以 我 
们 绑 定 了 goaouwu 事 件 。 这 里 使 用 this.props.navigator.push 将 购物 车 组 件 加 载 。 
4. 购物 车 组 件 
完成 了 商品 列表 页 的 开发 后 , 现在 需要 完成 商品 订单 支付 页 , 即 购物 车 页 面 , 具体 代码 如 下 : 


var GouWu = React.createClass({ 
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getInitialState: function(){ 


return { 
data: []， 
price: 0 
}; 
}, 


render: function(){ 
var data = this.state.data; 
var price = this.state.price; 
var list = []; 
for(var i in data){ 
price += parseFloat(data[lil].price); 
list.push( 
<View style={[styles.row, styles.list item]}> 
<Text style={styles.list item desc}> 

{data[lil].title} 

{data[lil].desc} 
</Text> 
<Text style={styles.list item price}>¥{data[i].price}</Text> 

</View> 
); 
} 
var str = 
if(price){ 
str = ', 共 ' + price.toFixed(1) + ' 元 '; 
} 
return( 
<ScrollView style={{marginTop:10}}> 
{1ist} 
<Text style={styles.btn}> 支 付 {str}</Text> 
<Text style={styles.clear} onPress={this.clearStorage}> 清 空 购物 车 </Text> 
</ScrollView> 


null; 


); 
} 
componentDidMount: function(){ 

var that = this; 

AsyncStorage.getAllKkeys(function(err, keys){ 

if(err){ 
//TODO: 存 储 取 数 据 出 错 
// 如 果 发 生 错误 ， 这 里 直接 返回 (Teturn) 防止 进入 下 面 的 逻辑 


} 
AsyncStorage.multiGet(keys, function(errs, result){ 

//TODO: 错误 处 理 

// 得 到 的 结果 是 二 维 数组 

//result[i][0] 表 示 我 们 存储 的 键 ，result[i][1] 表 示 我 们 存储 的 值 

var arr = []; 

for(var i in result){ 

arr.push(JSON.parse(result[i][1])); 


_that.setState({ 
data: arr 


}); 
}); 
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]); 
外 
clearStorage: function(){ 
var that = this; 
AsyncStorage.clear(function(err){ 
if(lerr){ 
_that.setState({ 
data:[]， 
price: 0 


alert(' 购 物 车 已 经 清空 '); 


//TODO: ERR 
站 3 


在 购物 车 页 面 主要 演 染 用 户 选 中 的 商品 列表 , 该 列表 包含 商品 名 称 、 价 格 等 信息 。 因 此 ,该 
组 件 也 必须 使 用 AsyncStorage API， 才 能 获取 我 们 在 列表 页 存储 的 商品 数据 。 同 样 ， 在 
componentDid-Mount 方 法 中 使 用 AsyncStorage.getAllkeys 来 获取 AsyncStorage 中 的 key。 然 后 再 使 
用 AsyncStorage.multiGet 获 取 商 品 数据 的 数组 。 这 里 result 代 表 的 是 二 维 数组 ，result[i][0] 表 
示 存 储 的 键 , result[i][1] 表 示 存 储 的 值 。 我 们 将 获取 到 的 数据 设置 到 this.state.data 上 。 这样， 
当 组 件 被 加 载 完 成 后 ， 就 会 显示 商品 列表 。 


此 外 , 还 需要 完成 清空 购物 车 的 功能 。 这 里 使 用 Asyncstorage.clear 清 除 AsyncStorage 中 的 所 
有 数据 。 这 里 只 是 为 了 演示 AsyncStorage 的 用 法 ， 所 以 没有 完成 支付 功能 ， 有 兴趣 的 同学 可 以 继 


5. 完成 整体 功能 
一 切 组 件 都 已 经 开发 完成 了 ， 现 在 需要 做 的 就 是 将 各 组 件 串联 起 来 ， 具 体 的 使 用 方法 如 下 : 


Var React = require('react-native'); 
var { 

AppRegistry, 

StyleSheet, 

Text， 

View, 

Image, 

NavigatorIO9， 

ScrollView, 

AsyncStorage, 

TouchableOpacity, 
} = React; 


// 以 下 省 略 之 前 的 代码 ， 其 中 ... 表 示 省 略 的 代码 
var Model = [....]; 

var Item = React.createClass({. : 
var List = React.createClass({. 3 
var GouWu = React.createClass({...}); 


.…}) 
“…}) 
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var App = React.createClass({ 
render: function() { 
return ( 
<NavigatorIOS 
style={styles.container} 
initialRoute={ 
{ 
component: List, 
title: ' 水 采 列 表 ' 
} 
}/> 


未 


var styles = StyleSheet.create({ 
container: { 
flex: 1， 
} 
row:{ 
flexDirection: 'row', 
marginBottom: 10， 


marginLeft:5, 
borderWidth:1, 
borderColor: '#ddd ， 
marginRight:5, 
height:100, 


backgroundColor: "transparent 
】， 
item text:{ 
backgroundColor: “#000 ， 
opacity: 0.7， 
color: '#fff " ， 
height:25， 
lineHeight:18, 
textAlign:'center', 
marginTop:74 
}， 
btn:{ 
backgroundColor: '#FF7200 ， 
height:33， 
textAlign: centeT ， 
color: '#fff " ， 
marginLeft:10, 
marginRight:10, 
lineHeight:24, 
marginTop:40, 
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fontSize:18, 

}), 

list item:{ 
marginLeft:5, 
marginRight:5, 
padding:5， 
borderWidth:1, 
height:30, 
borderRadius:3, 
borderColor: '#ddd" 


list item desc:{ 
flex:2, 
fontSize:15 


list item price:{ 
flex:1, 
textAlign: 'right', 
fontSize:15 


clear:{ 
marginTop:10, 
backgroundColor: '#FFF', 
color: '#000 ， 
borderWidth:1, 
borderColor: '#ddd ' ， 
marginLeft:10, 
marginRight:10, 
lineHeight:24, 
height:33, 
fontSize:18, 
textAlign: centeT ， 

} 

]) 


AppRegistry.registerComponent('App', () => App); 

这 里 , 我 们 也 使 用 了 NavigatorIOS 组 件 来 做 路 由 控制 , 初始 化 路 由 是 List 组 件 。 整 个 购物 车 的 
完整 代码 可 以 参考 https://github.com/vczero/React-Native-Code 项 目 第 4 章 4.2 节 。 最 后 完成 的 
效果 如 图 4-3 所 示 。 
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8 iOS Simulator - iPhone 5s - iPhone 5... Carrier 全 6:14 PM em, 
Carrier 全 7:10 PM mn < 水 果 列 表 购物 车 
水 果 列 表 

南非 红心 西 柚 2500g ¥29.9 
佳 沛 新 西 兰 进口 猕猴 桃 12 个 装 ¥99 

西 哥 进口 牛 油 果 6 个 装 ¥59 
新 疆 特产 西 梅 1000g ¥69 
陕西 大 萝 冬 枣 2000g ¥59.9 


支付 ， 共 316.8 元 


清空 购物 车 


去 结算 ， 共 5 件 商品 


图 4-3 ”购物 车 效果 图 


4.3 AlertlOS 


在 使 用 一 款 App 的 时 候 ， 经 常会 出 现 对 话 框 ， 这 在 Web 开 发 中 通过 alert 实 现 。 但 是 ，alert 
比较 丑陋 ， 不 符合 我 们 的 业务 和 审美 要 求 ， 此 时 需要 定制 自己 的 对 话 框 。React Native 在 这 一 点 
上 做 得 很 好 ， 给 我 们 提供 了 原生 的 对 话 框 ， 那 就 是 AlertIOS。 


4.3.1 AlertlOS 


AlertIOS 组 件 应 用 很 广 ， 但 是 使 用 也 十 分 简单 ， 它 的 静态 方法 有 如 下 两 个 。 


口 alert(title，message，buttons): 普通 对 话 框 ， 其 中 buttons 是 对 象 数 组 。 
口 prompt(title，value，buttons): 提供 输入 的 对 话 框 ， 其 中 buttons 是 对 象 数组 。 


butons 的 形式 为 : 
[ 


{ 
text: ' 按 钮 显示 的 字符 囊 '， 
onPress: function(){ 
// 上 点击 按钮 触发 的 事件 
} 
} 
] 
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默认 的 AlertIOS 组 件 会 提供 一 个 “确认 ”( 或 者 OK ) 按钮 。 默 认 情 况 下 ， 数 组 中 最 后 一 个 按 
钮 高 亮 显 示 。 如 果 数 组 的 长 度 过 长 ， 按 钮 就 会 垂直 排列 。 


4.3.2 AlertIlOS 组 件 的 应 用 


这 里 使 用 AlertOS 组 件 做 一 个 简单 的 演示 ， 其 中 会 使 用 AlertI0$.alert 函 数 简单 地 弹出 对 话 
框 ， 使 用 AlertI0S.prompt 弹 出 用 户 输入 的 值 ， 具 体 的 代码 如 下 所 示 : 


var React = require('react-native'); 
var { 

AppRegistry, 

StyleSheet, 

Text， 

View, 

AlertI0S, 
} = React; 


var App = React.createClass({ 

render: function(){ 

return( 

<View style={styles.container}> 

<Text style={styles.item} onPress={this.tip}> 提 示 对 话 框 </Text> 

<Text style={styles.item} onPress={this.input}> 输 入 对 话 框 </Text> 
</View> 
); 
}, 
tip: function(){ 

AlertI0S.alert(' 提 示 '，' 选 择 学 习 React Native',[ 


text: ' 取 消 '， 
onPress: function(){ 
alert(' 你 点 击 了 取消 按钮 ' ); 
+ 
}, 
{ 


text: “确认 ， 
onPress: function(){ 
alert( 你 点 击 了 确认 按钮 )j 


]); 
input: function(){ 
AlertI0S.prompt(' 提 示 '，' 使 用 React Native 开 发 App',[ 
{ 


text: ' 取 消 '， 
onPress: function(){ 
alert(' 你 点 击 了 取消 按钮 '); 
} 
}, 
{ 
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text: ' 确 认 '， 
onPress: function(e){ 
alert(e); 
} 
hs 
| 
} 
1 


var styles = StyleSheet.create({ 
container:{ 
flex:1， 
marginTop:25 


marginTop:10， 
marginLeft:5, 
marginRight:5, 
height:30, 
borderWidth:1, 
padding:6， 
borderColor: '#ddd 
} 
]); 


AppRegistry.registerComponent('App', () => App); 


运行 上 述 代 码 ， 得 到 的 效果 如 图 4-4 所 示 。 


提示 


使 用 React Native 开 发 App 


取消 确认 


QWERTYUIoOP 


ASDIFIGIHIJIKIL 


EzlxlcivielNIvE9 
四 四 “四 


图 4-4 ”AlertIOS 组 件 的 演示 效果 
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AlertIOS 梧 
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4.4 ActionSheetlOS 


在 App 开 发 中 我 们 也 会 遇 到 这 样 的 需求 ， 那 就 是 分 享 和 弹出 多 项 选择 操作 。 在 iOS 开 发 中 ， 
ActionSheet 提 供 了 这 样 的 功能 。 而 React Native 同 样 封装 了 该 功能 ， 那 就 是 ActionSheetIOS 。 


4.4.1 ActionSheetlOS 介绍 


ActionSheetIOS 提 供 了 两 个 静态 方法 ， 具 体 如 下 所 示 。 


口 showActionSheetWithOptions(options，callback): 用 于 弹出 分 类 菜单 。 
口 showShareActionSheetWithOptions(options, failureCallback，successCallback) : 分 享 
弹出 窗 。 


4.4.2 ”ActionSheetlOS 应 用 
ActionSheetIOS 的 用 法 同 AlertIOS 一 样 简 单 ， 这 里 我 们 简单 演示 一 下 ， 有 具体 代码 如 下 所 示 : 


var React = require('react-native'); 
var { 

AppRegistry, 

StyleSheet, 

Text， 

View, 

ActionSheetI0S, 
} = React; 


var App = React.createClass({ 
render: function(){ 
return( 
<View style={styles.container}> 
<Text style={styles.item} onpress= 
{this.tip}>showActionSheetWithOptions</Text> 
<Text style={styles.item} onpress= 
{this.share}>showShareActionSheetwithOptions</Text> 
</View> 


3 


}, 
tip: function(){ 
ActionSheetI0OS. showActionSheetWithOptions({ 
options: [ 

"拨打 电话 ， 
"发 送 邮 件 ， 
发 送 短 信 ， 
' 取 消 ' 


cancelButtonIndex: 3， 


destructiveButtonIndex: 0， 
}, function(index){ 
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alert(index); 
]); 
}, 
share: function(){ 
ActionSheetI0OS. showShareActionSheetwithOptions({ 
url: 'https://code.facebook.com', 
}, function(err){ 
alert(err); 
}, function(e){ 
alert(e); 
]); 
} 
]); 


var styles = StyleSheet.create({ 
container:{ 
flex:1, 
marginTop:25 


marginTop:10, 
marginLeft:5, 
marginRight:5, 


borderWidth:1, 
padding:6， 
borderColor: '#ddd 
} 
)); 


AppRegistry.registerComponent('App', () => App); 


从 上 面 的 代码 可 以 看 到 showActionSheetwithoptions 的 使 用 方式 。showActionSheetWith- 
0ptions 的 第 一 个 参数 是 一 个 对 象 ， 该 对 象 的 options 属 性 是 字符 串 数 组 ， 表 示 可 选项 的 名 称 。 第 
二 个 参数 cancelButtonIndex 表 示 “ 取 消 ” 按 钮 的 位 置 ， 即 “取消 ”按钮 在 options 数 组 中 的 索引 。 
第 三 个 参数 destructiveButtonIndex 表 示 不 能 使 用 的 按钮 位 置 ， 即 不 能 使 用 的 按钮 在 options 数 组 
中 的 索引 。 


showShareActionSheetWithOptions 方 法 主要 用 于 分 享 一 个 urLl， 它 的 第 一 个 参数 是 一 个 对 象 ， 
第 二 个 参数 是 失败 的 回调 函数 ， 第 三 个 参数 是 成 功 的 回调 函数 。 


上 述 代码 的 运行 效果 如 图 4-5 所 示 。 
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拨打 电话 
发 送 邮件 
发 送 短信 


图 4-5 ”ActionSheetIOS 的 演示 效果 


4.5 PixelRatio 


随 着 技术 的 发 展 ， 很 多 设备 都 是 高 清 屏 ， 这 在 iOS 移 动 设备 上 尤为 明显 。 为 了 保证 图 片 的 显 
示 效 果 一 致 ,我们 需要 针对 不 同 的 设备 准备 多 套图 片 , 这 是 一 件 烦 琐 的 事 。 实 际 上 , 在 React Native 
中 ，pt 单 位 是 统一 的 ， 但 是 移动 设备 的 像素 密度 是 不 一 样 的 。React Native 提 供 了 PixelRatio 来 告 
知 开发 者 像素 密度 。 比 如 ，iPhone 4 的 像素 密度 是 2， 那 么 在 该 设备 上 表达 一 个 线 宽 就 需要 使 用 
1/PixelRatio.get()。 


4.5.1 ”PixelRatio 介绍 


PixelRatio 提 供 了 一 些 静 态 方法 供 我 们 使 用 ， 具 体 如 下 。 
口 get(): 获取 像素 密度 。 例 如 : 


PixelRatio.get() === 1 

mdpi Android devices (160 dpi) 
PixelRatio.get() === 1.5 

hdpi Android devices (240 dpi) 
PixelRatio.get() === 2 

iPhone 4, 45 

iPhone 5, 5c, 55 

iphone 6 
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xhdpi Android devices (320 dpi) 
PixelRatio.get() === 

iPhone 6 plus 

xxhdpi Android devices (480 dpi) 
PixelRatio.get() === 3.5 

Nexus 6 


口 getPixelSizeForLayoutSize(number): 获取 一 个 布局 元 素 的 像素 大 小 , 其 返回 值 是 一 个 四 
舍 五 人 的 整 型 。 该 方法 的 定义 也 比较 简单 ， 相 关 代码 如 下 : 
function getPixelSizeForLayoutSize(layoutSize){ 
return Math.round(layoutSize * PixelRatio.get()); 
} 
口 getFontScale(): 获取 字体 比例 。 在 0.15.0 版 本 中 ， 目 前 只 支持 Android，iOS 默 认 还 是 使 
用 像素 密度 。 该 函数 的 定义 如 下 : 


function getFontScale(){ 4 
return Dimensions.get('window').fontScale || PixelRatio.get(); 
} 


4.5.2 ”PixelRatio 应 用 
这 里 我 们 使 用 两 个 简单 的 示例 来 说 明 PixelRatio 的 用 途 。 


1. 最 细 边 框 
下 面 我 们 使 用 borderWidth:1/PixelRatio.get() 来 获取 最 细 的 边框 : 


Var React = require('react-native'); 

var { 
AppRegistry, 
StyleSheet, 
Text， 
View， 
PixelRati 

} = React; 


口 


var App = React.createClass({ 
render: function(){ 
return 
<View style={styles.container}> 
<View style={{borderWidth:1, borderColor:'red', height:40, 
marginBottom:20}}></View> 
<View style={{borderWidth:1/PixelRatio.get(), 
borderColor: 'red', height:40}}></View> 
</View> 
); 
}, 
]); 
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var styles = StyleSheet.create({ 
container:{ 
flex:1, 
marginTop:25 
}), 
]); 


AppRegistry.registerComponent('App', () => App); 

2. 自 适 应 图 片 

我 们 希望 一 个 图 片 既 可 以 用 在 普通 设备 上 ,又 能 用 在 高 清 设 备 上 ， 此 时 就 需要 获取 图 片 的 真 
实 像素 ， 这 可 以 使 用 PixelRatio.getPixelSizeForLayoutSize 来 实现 ， 实 际 上 也 就 是 Math.round 
(layoutSize * PixelRatio.get())。 下 面 的 代码 只 是 示意 代码 ， 具 体 可 以 根据 需求 修改 : 


var image = getImage({ 
width: PixelRatio.getPixelSizeForLayoutSize(300)， 
height: PixelRatio.getPixelSizeForLayoutSize(200), 


})); 


4.6 AppStatelOS 


运行 一 款 App 的 时 候 ， 需 要 知道 该 App 的 运行 状态 ， 这 样 我 们 可 以 在 合适 的 时 机 (根据 运行 
状态 ) 做 一 些 合理 的 事情 。React Native 提 供 了 AppStateIOS 来 告知 我 们 App 的 状态 一 一 激活 状态 
(前 台 运 行 ) 和 后 台 运 行 ， 甚 至 可 以 通知 我 们 状态 的 改变 。 此 外 ，AppStateIOS 也 经 常用 于 做 推送 
通知 。 


4.6.1 AppStatelOS 介绍 


Appstatelos 拥 有 添加 和 删除 事件 的 带 态 方法 ， 因 此 ， 我 们 可 以 在 代码 中 添加 事件 监听 。 以 
下 是 AppStateIOS 的 属性 和 事件 。 


D currentState: 我 们 可 以 通过 AppStateI0S.currentState 获 取 当 前 App 的 属 怕 


口 addEventListener(type，handler) : 静态 方法 ， 用 于 添加 事件 监听 。 
口 removeEventListener(type，handler): 静态 方法 ， 用 于 删除 事件 监听 。 


PT 


4.6.2 AppStatelOS 实例 


我 们 既 可 以 使 用 AppstateI0S.currentstate 获 取 应 用 的 状态 ， 也 可 以 使 用 addEventListener 
来 监听 一 些 事 件 ， 比 如 change 和 memoryWarning 事 件 。 示 例 代码 如 下 : 


alert(AppStateIOS.currentState); 


AppStateIOS.addEventListener('change', function(){ 
//TODO: 状态 改变 事件 
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]); 

AppStateIOS.addEventListener('memoryWarning' , function(){ 
//TODO: 内 存 报警 事件 

]); 


4.7 StatusBarlOS 


有 时候， 我 们 需要 改变 App 的 状态 栏 ， 这 在 React Native 中 通过 StatusBarIOS 来 实现 。 


4.7.1 ”StatusBarlOS 介绍 


StatusBarIOS 有 3 个 静态 方法 ， 具 体 如 下 所 示 。 


口 setStyle(style, animated) : 设置 状态 栏 的 样式 。 其 参数 style 是 字符 串 , 可 以 是 'default' 
和 'light-content' 中 的 一 个 。animated 是 可 选 参 数 ， 表 示 是 否 有 动画 过 渡 ， 其 值 为 true 
或 者 false。 

口 setHidden(hidden，animated) : 用 于 隐藏 状态 栏 。 其 参数 hidden 是 boolean 类 型 ， 如 果 其 
值 为 true， 则 隐藏 状态 栏 ， 和 否则 不 隐藏 。animated 为 可 选 参数 ， 表 示 是 否 有 动画 过 渡 ， 其 
值 为 true 或 者 false。 

口 setNetworkActivityIndicatorVisible(visible): 是 否 显 示 网 络 状 态 。 其 参数 visible 是 
boolean 类 型 ， 如 果 其 值 为 true， 则 显示 网 络 状 态 ， 否 则 不 显示 。 


4.7.2 ”StatusBarlOS 应 用 


首先 ， 使 用 statusBarI0S.setStyle 来 测试 StatusBarIOS 的 用 法 。 将 整个 容器 的 背景 颜色 设置 
为 蓝 色 ， 这 样 我 们 可 以 看 到 状态 栏 变 为 白色 ,具体 的 代码 如 下 : 


Var React = require('react-native'); 
var { 

AppRegistry, 

StyleSheet, 

Text， 

View, 

StatusBarIO9 ， 
} = React; 


StatusBarIOS.setStyle('light-content'); 
Var App = React.createClass({ 
render: function(){ 
return( 
<View style={styles.container}></View> 
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var styles = StyleSheet.create({ 
container:{ 
flex:1, 
backgroundColor: '#1FB9FF" 


》 


]); 
AppRegistry.registerComponent('App', () => App); 
再 使 用 setNetworkActivityIndicatorVisible 来 显示 网 络 状态 ， 具 体 的 代码 如 下 : 


var React = require('react-native'); 
var { 
AppRegistry, 
StyleSheet, 
Text， 
View, 
9StatusBarIO9 ， 
} = React; 
StatusBarIOS.setStyle('default'); 
StatusBarI0S.setNetworkActivityIndicatorVisible(true); 
var App = React.createClass({ 

render: function(){ 

return( 

<View style={styles.container}></View> 
); 

外 
]); 


var styles = StyleSheet.create({ 
container:{ 
flex:1 


})); 


AppRegistry.registerComponent('App', () => App); 
整个 代码 的 运行 效果 如 图 4-6 所 示 。 


Carrier 全 江 1:20 PM me 


图 4-6 ”状态 栏 


4.8 Netlnfo 


网 络 对 一 款 App 至 关 重 要 ， 我 们 需要 根据 网 络 的 状态 来 采取 不 同 的 方案 。 比 如 ， 在 WiFi 网 络 
的 情况 下 , 建议 可 以 浏览 大 图 ; 如 果 是 离线 状态 , 要 关闭 loading 效 果 , 及 时 提醒 用 户 网 络 的 状态 ， 
这 样 才能 避免 用 户 长 时 间 等 待 。 在 React Native 中 ，NetInfo API 提 供 了 获取 网 络 状态 的 方法 。 
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4.8.1 Netinfo 介绍 


NetInfo 提 供 的 属性 和 方法 如 下 所 示 。 


口 isConnected: 表示 网 络 是 否 连接 。 

口 fetch(): 获取 网 络 状 态 。 

口 addEventListener(eventName，handler) : 添加 事件 监听 。 

口 removeEventListener(eventName，handler): 删除 事件 监听 。 


其 中 ， 网 络 状态 主要 有 以 下 几 种 类 型 。 

口 none: 离线 状态 。 

D wifi: 在 线 状态 ， 并 且 通 过 WiFi 或 者 是 iOS 模 拟 需 连接 。 
口 cell: 网 络 连接 ， 通 过 3G、WiMax 或 者 LTE 进 行 连接 。 
口 unknown: 错误 情况 ， 网 络 状态 未 知 。 


4.8.2 ”Netlnfo 示例 


NetInfo 可 以 获取 网 络 的 状态 和 类 型 。 比 如 ， 在 手机 3G 网 络 的 情况 下 建议 用 户 开启 “无 图 片 
浏览 ”; 在 WiFi 的 情况 下 ， 引 导 用 户 播放 视频 。 获 取 网 络 状态 的 代码 如 下 : 


// 获 取 连 接 类 型 
NetInfo.fetch().done(function(reachability){ 
alert(reachability); 

]); 


// 获 取 是 否 连接 
NetInfo.isConnected.fetch().done(function(isConnected){ 
alert(isConnected); 


})); 


// 添 加 网 络 状态 变化 监听 
NetInfo.addEventListener('change', function(reachability){ 
alert(reachability); 


})); 


// 获 取 是 否 连接 
NetInfo.isConnected.addEventListener('change', function(isConnected){ 
alert(isConnected); 


3 


4.9 CameraRoll 


现在 App 经 常用 的 一 个 功能 就 是 上 照相机， 照相 机 的 功能 有 很 多 : 存储 照片 、 获 取 照 片 、 拍 摄 
照片 、 拍 摄 视频 、 扫 描 二 维 码 等 。 在 Web App 中 ,要 使 用 这 些 功 能 ， 需 要 通过 Hybrid 实现 。 比 如 ， 
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在 Web 中 获取 照片 的 唯一 吓 就 比较 困难 ， 但 是 在 Native 中 却 是 件 很 容易 的 事 。 比 如 ， 我 们 有 这 样 
的 一 个 需求 一 一 批量 上 传 照片 ， 上 传 照片 的 时 候 ， 需 要 将 图 片 的 base64 和 id 传递 到 图 片 服务 器 。 
对 于 HTML5 来 说 ,我们 需要 定义 自己 的 随机 id， 并 且 需 要 将 随机 id 关联 到 本 地 资源 ， 这 是 一 件 比 
较 困 难 的 事情 。 然 后 这 在 微 信 的 JS-SDK 中 却 能 轻松 完成 。 这 是 因为 微 信 JS-SDK 调 用 了 Native 的 
接口 。 我 们 使 用 ReactNative 的 一 个 好 处 就 是 : React Native 提 供 了 原生 的 API 和 组 件 ， 例 如 照相 机 
的 功能 就 是 CameraRoll API。 


4.9.1 CameraRoll 介绍 


CameraRoll 提 供 了 对 照相 机 控制 的 权限 ， 它 提供 了 两 个 比较 简单 的 静态 方法 。 


口 saveImageWithTag(tag，successCallback，errorCallback): 用 于 保存 图 片 到 相册 。 参 数 
tag 是 图 片 的 地 址 ， 是 字符 串 类 型 ， 在 Android 中 是 本 地 地 址 ， 例 如 
"file:///sdcard/img.png"。 在 iOS 中 ，tag 的 类 型 比较 多 ， 可 以 是 url、assets-library、 内 存 
图 片 中 的 一 种 。successCallback 是 成 功 的 回调 也 数 ，errorCallback 是 失败 的 回调 也 数 。 

口 getPhotos(params, callback, errorCallback): 用 于 获取 相册 中 的 图 片 。params 表 示 获 取 
有 照片 的 参数 ，callback 是 成 功 回调 ，errorCallback 是 失败 回调 。 


4.9.2 CameraRoll 应 用 


为 了 更 好 地 说 明 CameraRoll 的 用 法 ， 这 里 用 示例 简单 演示 一 下 。 同 时 ，CameraRoll API 的 调 
用 可 以 在 模拟 器 上 展示 出 来 。 这 对 于 我 们 开发 程序 来 说 是 一 件 幸 福 的 事情 ， 既 不 用 打包 成 App， 
也 不 用 将 bundle 文 件 上 传 到 服务 器 。 

该 案例 主要 有 两 个 功能 一 一 将 网 络 图 片 保 存 到 相册 、 显 示 相 册 中 的 图 片 ， 具 体 步 又 如 下 。 

1. 保存 网 络 图 片 

很 多 时 候 , 我 们 需要 用 到 的 一 个 功能 就 是 将 网 络 图 片 保存 到 本 地 , 例如 将 微 信 朋 友 圈 里 好 玩 
的 图 片 存放 到 相册 ， 这 可 以 使 用 React Native 的 saveImageWithTag 孙 数 来 实现 。 这 里 我 们 设置 一 个 
按钮 ， 该 按钮 被 点 击 时 保存 两 张 图 片 ， 相 关 代码 如 下 : 


// 图 片 地 址 
var imgURL = "http://vczero.github.io/lvtu/img/"'; 
// 视 图 
<View> 
<Text onpress={this.saveImg.bind(this, 'city.jpg', '3.jpeg')} 
style={[styles.saveImg]}3 保 存 图 片 到 相册 </Text> 
</View> 
// 保 存 功 能 
saveImg: function(img1, img2){ 
var that = this; 
CameraRoll.saveImageWithTag(imgURL + img1, function(url){ 
if(url){ 
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var photos = that.state.photos; 
photos.push(url); 
_that.setState({ 

photos: photos 


和 
CameraRoll.saveImageWithTag(imgURL + img2，function(url){ 


_that 
pho 
]); 


.setState({ 


tos: photos 


photos.push(url); 


alert 
}, func 
alert 


})); 


}, function( 


}); 
} 


"保存 图 片 成 功 '); 
tion(){ 
"保存 图 片 失败 ' ); 


{ 


alert(' 保 存 图 片 失败 '); 
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这 里 简单 地 保存 两 张 图 片 ，saveImageWithTag 中 的 成 功 回 调 函数 获取 到 的 数据 是 被 保存 图 片 


的 ID。 
2. 获取 图 片 


有 时 候 , 我 们 需要 显示 相机 里 的 图 片 。 比 如 ， 发 表 微 信 或 者 上 传 图 片 时 , 需要 在 上 传 前 预览 
图 片 ， 而 不 是 直接 将 图 片上 传 到 服务 器 再 返回 图 片 数据 进行 预览 。 
提示 选择 最 近 拍摄 照片 是 否 要 上 传 。 这 个 用 户 体验 很 好 , 因为 我 们 希望 拿 到 用 户 最 近 的 拍摄 图 片 。 
在 React Native 中 ， 可 以 使 用 getPhotos 来 获取 手机 相册 里 的 图 片 。 这 个 示例 的 具体 代码 如 下 : 


// 参 数 


var fetchparams = { 


first: 5, 
groupTypes: 
assetType: 
] 
// 获 取 照 片 


“ATL 
'Photos', 


componentDidMount: function(){ 


var that = 


this; 


CameraRoll.getPhotos(fetchparams, function(data){ 


var edges 
var photo 
for(var i 

photos. 


_that. set 
photos: 
}); 


}, function 


= data.edges; 


s= []; 
in edges){ 
push(edges[i].node.image.uri); 


State({ 
photos 


OF 


alert(' 获 取 照 片 失 败 '); 


) 


外 
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又 比如 ， 发 表 QQ 状 态 B 


时 ,会 
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在 上 述 代码 中 ，getPhotos 的 第 一 个 参数 是 fetchParams ， 其 定义 如 下 : 


var fetchparams = { 
first: 5，// 获 取 数 据 的 个 数 
groupTypes: React.PropTypes.one0f([ // 数 据 的 分 组 类 型 ， 可 以 是 数组 中 的 任意 一 个 
“Album ， 


Library ， 
PhotoStream', 
'SavedPhotos', 
])， 
assetType: React.PropTypes.one0f([ // 资 源 类 型 ， 可 以 是 数组 中 任意 一 个 
"Photos  ， 

"Videos ， 

'All', 

])， 

}; 


其 实 ， 需要 我 们 注意 的 是 getPhotos 成 功 回调 时 返回 的 数据 ， 结 果 如 下 : 


edges: [ 
{ 
node: { 
timestamp: 1405312098, 
group_name: 'CameraRoll', 
type: “ALAssetTypePhoto ， 
image: { 
isStored: true, 
height: 669， 
uri: "assets-library: //asset/asset.JPG?id= 
C9DB366F-350B-469E-88F7-76C785040206&ext=JPG'， 
width: 1008 
}, 
location: {} 
]， 
{ 
node: { 
timestamp: 1405312098, 
group_name: 'CameraRoll', 
type: “ALAssetTypePhoto ， 
image: { 
isStored: true, 
height: 1001， 
uri: "assets-library: //asset/asset.JPG?id= 
B6COA21C-07C3-493D-8B44-3BA4C9981C25&ext=JPG', 
width: 1500 
}， 
location: {} 


} 
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】， 
{ 
node: { 
timestamp: 1405312097， 
group_name: 'CameraRoll’, 
type: “ALAssetTypePhoto ， 
image: { 
isStored: true, 
height: 1250， 
uri: 'assets-library: //asset/asset.JPG?id= 
32D59830-62A0-445D-82B7-32C7C02F8897&ext=JPG'， 
width: 834 
]， 
location: {} 
} 
} 
]， 
page_info: { 
has_next page: true, 
start cursor: 'assets-library: //asset/asset.JPG?id= 
C9DB366F-350B-469E-88F7-76C785040206&ext=JPG', 
end cursor: 'assets-library: //asset/asset.JPG?id= 
32D59830-62A0-445D-82B7-32C7C02F8897&ext=JPG" 


} 
} 


可 以 看 到 ， 我们 设置 需要 返回 3 条 数据 ， 即 edges 返 回 的 3 个 node。 每 个 node 是 一 个 对 象 ， 其 
中 包含 图 片 的 时 间 惟 、 组 名 、 类 型 、 图 片 的 宽 高 、 本 地 uri 以 及 位 置信 息 。 同 时 ，page_info 告 诉 
我 们 还 存在 下 一 页 图 片 。 因 为 这 里 设置 一 次 取 3 张 ， 所 以 就 是 3 张 一 页 。 我 们 可 以 根据 has_next_ 
page 来 判断 是 否 需 要 继续 加 载 图 片 。 

3. 实例 验证 

通过 前 面 两 步 的 描述 ,我 们 大 体 知道 了 如 何 使 用 CameraRoll。 但 是 ,我们 更 希望 用 一 个 完整 
的 例子 展示 出 来 ， 这 样 更 清楚 如 何 将 CameraRoll 用 于 实际 生产 。 该 实例 的 综合 代码 如 下 : 


Var React = require('react-native'); 

var { 
AppRegistry, 
CameraRol1l, 
Image, 
ListView, 
StyleSheet, 
View, 
Text， 
ScrollView, 

} = React; 


var fetchParams = { 
first: 4， 
groupTypes: 'All', 
assetType: “Photos '， 
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}; 
var imgURL = "http://vczero.github.io/lvtu/img/"'; 


var App = React.createClass({ 
getInitialState: function(){ 
return{ 
photos: null 
}; 
外 
render: function(){ 
var photos = this.state.photos || []; 
var photosView = []; 
for(var i = 0; i < 4; i += 2){ 
photosView.push( 
<View style={styles.row}> 
<View style={styles.flex 1}> 
<Image 
resizeMode="stretch" 
style={[styles.imgHeight, styles.m5]} 
source={{uri:photos[i]}}/> 
</View> 
<View style={styles.flex 1}> 
<Image 
resizeMode="stretch" 
style={[styles.imgHeight, styles.m5]} 
source={{uri:photos[parseInt(i) + 1]}}/> 
</View> 
</View> 
); 
i 


return( 
<ScrollView> 
<View style={styles.row}> 
<View style={styles.flex 1}> 
<Image 
resizeMode="stretch" 
style={[styles.imgHeight, styles.m5]} 
source={{uri: imgURL + 'city.jpg' }}/> 
</View> 
<View style={styles.flex 1}> 
<Image 
resizeMode="stretch" 
style={[styles.imgHeight, styles.m5]} 
source={{uri: imgURL + '3.jpeg'}}/> 
</View> 
</View> 
<View> 
<Text onpress={this.saveImg.bind(this, 'city.jpg', '3.jpeg')} 
style={[styles.saveImg]}3 保 存 图 片 到 相册 </Text> 


</View> 

<View style={[{marginTop:20}]}> 
{photosView} 

</View> 
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</ScrollView> 
); 
}, 
componentDidMount: function(){ 
var that = this; 
CameraRoll .getPhotos(fetchparams, function(data){ 
console.1log(data); 
var edges = data.edges; 
var photos = []; 
for(var i in edges){ 
photos.push(edges[il].node.image.uri); 
} 


that.setState({ 
photos: photos 
]); 
}, function(){ 
alert(' 获 取 照 片 失 败 '); 
]); 
}, 


saveImg: function(img1, img2){ 
var that = this; 
CameraRoll .saveImageWithTag(imgURL + img1, function(url){ 
if(url){ 
var photos = that.state.photos; 
photos .unshift(url); 
_that.setState({ 
photos: photos 
}); 
CameraRoll .saveImageWithTag(imgURL + img2, function(url){ 
photos.unshift(url); 
that.setState({ 
photos: photos 
}); 
alert(' 保 存 图 片 成 功 '); 
}, function(){ 
alert(' 保 存 图 片 失败 '); 


alert(' 保 存 图 片 失 败 '); 


var styles = StyleSheet.create({ 
flex 1:{ 


m5:{ 
marginLeft:5, 
marginRight:5, 
borderWidth:1, 
borderColor: '#ddd" 


图 灵 社 区 会 员 蚂 蜂 (240671488@qq.com) 专 享 尊重 版 权 


CameraRoll < 


165 


166 区 第 4 章 常用 API 及 其 实践 


flexDirection: “TOW” 

]， 

imgHeight:{ 
height:120 

]， 

saveImg:{ 
flex:1, 
height:30, 
textAlign: centeT ， 
marginTop:20, 
backgroundColor: '#3BC1FF', 
color: '#FFF", 
lineHeight:20, 
borderRadius:5, 
marginLeft:5, 
marginRight:5, 
fontweight: bold' 

} 

]) 


AppRegistry.registerComponent('App', () => App); 


运行 上 述 代 码 ， 得 到 的 效果 如 图 4-7 所 示 ， 点 击 “ 保 存 图 片 到 相册 ”按钮 ， 将 该 按钮 上 方 的 
两 张 图 片 保存 到 本 地 ， 同 时 显示 最 近 的 4 张 图 片 。 


iOS Simulator - iPhone 5s - iPhone 5.… 
Carrier 全 5:41 PM 


图 4-7 ”CameraRoll 示 例 
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接着 在 模拟 器 上 使 用 快捷 键 shift+tcmd+H 回 退 到 主页 。 然 后 点 击 Photos ( 即 相册 )， 查 看 保存 
的 图 片 ， 如 图 4-8 所 示 。 


iOS Simulator - iPhone 5s - iPhone 5.… 
Carmier 全 5:56 PM ms 


《Collections Moments Q Select 


July 14, 2014 Share 
Badd | 
i 

Today Share 


veka 


图 4-8 ”在 Photos 中 查看 保存 的 图 片 


4.9.3 react-native-camera 


很 多 时 候 ， 最 基础 的 API 往 往 不 能 满足 功能 需求 ， 需 要 我 们 自己 拓展 和 开发 。 但 是 因为 项 目 
紧张 ， 我 们 又 不 想 造 轮子 ， 因 此 需要 寻找 第 三 方 库 。 如 果 第 三 方 库 能 满足 我 们 的 全 部 需求 最 好 ， 
如 果 不 能 ， 可 以 修改 和 拓展 第 三 方 库 。 

这 里 我 们 需要 调用 摄像 头 。 我 们 在 GitHub 上 找到 了 一 个 开源 库 react-native-camera， 地 址 为 
https://github.com/lwansbrough/react-native-camera。 下 面 按照 如 下 步 又 来 使 用 react-native-camera。 

1. 安装 react-native-camera 

进入 项 目的 根 目录 ， 即 package.json 的 目录 。 打 开 终 端 , 使 用 npm 安 装 最 新 版 本 ,如果 没 有 错 
误 ， 则 说 明 安 装 成 功 : 

npm install react-native-camera@latest --save 

2. 添加 工程 


因为 该 第 三 方 库 不 是 单纯 的 JavaScript 库 ， 其 中 包含 了 Objective-C 的 代码 ， 所 以 需要 编译 。 将 
react-native-camera 添 加 到 我 们 的 项 目 中 ， 有 具体 步 又 如 下 所 示 。 
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(1) 打开 Xcode， 找 到 项 目 目录 ， 右 击 Libraries， 选 择 Add Files to [your projects name]。 


(2) 选择 node_modules 下 我 们 刚才 安装 的 react-native-camera 目 录 ， 进 入 该 项 目 ， 选 择 并 添加 
RCTCamera.xcodeproj 项 目 文件 ， 这 时 候 你 应 该 看 到 Libraries 包 含 了 react-native-camera 项 目 。 


(3) 选中 该 项 目 ， 在 Xcode 中 间 的 设置 栏 中 找到 Build Phases 一 Link Binary With Libraries。 点 
击 “ 添 加 ”按钮 ， 选 择 libRCTCamera.a 并 添加 。 


(4) 在 Libraries 中 找到 并 点 击 RCTCamera.xcodeproj。 选 择 Build Settings 选 项 卡 ， 此 时 默认 显示 
的 是 Basic， 这 里 需要 选中 All 选 项 卡 。 然 后 找到 Header Search Paths 项 并 点 击 ， 确 保 该 项 的 值 包含 
$(SRCROOT)/../react-native/React 和 $(SRCROOT)/../../React 这 两 项 ， 并 日 它们 的 值 是 recursive， 如 
图 4-9 所 示 。 


PROJECT sasic ED Lovols + Or Heador © 


四 crcamena Locaton 
T Search Paths 


Bulld Phasos Build Rulos Wontiy and Ws 


Name 


TARGETS 
hs RCTCamem 
Always Search Useor Paths No 2 Full Pash 
Framework Search Paths 
T Hoador Search Paths /Applications/Xcode.app/Contents/Davelopoer/Toolchains/... 
Debug /Apollcations/Xcode-aoc/Ce ‘mts/Develooer/Toolchalns/... 
Release SUnh 
User Header Search Paths Appicatons/Xcode .app/Conments/Developer/Toolchains/ XcodeDefault 


TApple LLVM 6.1 - Language 


Incroase Sharing of Precompaed Head 
Precompile Prefix Header 

Profix Header 

Use Standard System Header Director 


YApple LLVM 6,1 - Language - Modules 者 
一 we 
:7 Allow Non-modular includes In Framework Modules No pd et 


图 4-9 项 目 配置 


到 此 ， 我 们 完成 了 第 三 方 库 的 添加 。 

3 . 使 用 react-native-camera 

这 时 候 使 用 cmd+R 重 启 项 目 , 会 发 现在 模拟 器 中 无 法 调用 摄像 头 。 我 们 需要 将 其 打包 后 放 在 
真 机 上 运行 才 行 ， 具 体 的 打包 流程 可 参见 第 7 章 。 我 们 使 用 GitHub 上 的 例子 ， 该 例子 包含 两 个 功 
能 : 前 置 摄像 头 和 后 置 摄像 头 的 切换 、 拍 照 。 感 谢 lwansbrough 提 供 该 库 ， 具 体 的 代码 如 下 : 


Var React = require('react-native'); 
var { 
AppRegistry, 
StyleSheet, 
Text， 
View, 
TouchableHighlight 
} = React; 
var Camera = require('react-native-camera'); 


图 灵 社 区 会 员 蚂 蜂 (240671488@qq.com) 专 享 尊重 版 权 


4.9 


var cameraApp = React.createClass({ 
getInitialState() { 
return { 
cameraType: Camera.constants.Type.back 


}, 


render() { 
return ( 
<Camera 

ref="cam" 

style={styles.container} 

onBarCodeRead={this. onBarCodeRead} 

type={this. state.cameraType}> 

<Text style={styles.welcome}> 
Welcome to React Nativel 

</Text> 

<Text style={styles.instructions}> 
To get started, edit index.ios.js{'\n'} 
Press Cmd+R to reload 

</Text> 

<TouchableHighlight onpress={this. switchCamera}> 
<Text>The old switcheroo</Text> 

</TouchableHighlight> 

<TouchableHighlight onpress={this. takePicturej}> 
<Text>Take Picture</Text> 

</TouchableHighlight> 

</Camera> 


bs: 


}, 
_onBarCodeRead(e) { 
console.log(e); 


和 
_switchCamera() { 
var state = this.state; 
state.cameraTlype = state.cameraType === Camera.constants.Type.back 
? Camera.constants.Type.front : Camera.constants.Type.back; 
this.setState(state); 
}， 
_takepicture() { 
this.refs.cam.capture(function(err, data) { 
console.log(err, data); 


var styles = StyleSheet.create({ 
container: { 
flex: 1， 
justifyContent: “centeT ， 
alignItems: “centeT ， 
backgroundColor: “transparent ， 


}, 
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Welcome : { 
fontSize: 20， 
textAlign: “center ， 
margin: 10， 


了 
instructions: { 
textAlign: 'center', 
color: '#333333', 
外 
]); 


AppRegistry.registerComponent('App', () => cameraApp); 


在 真 机 上 运行 ， 可 以 看 到 效果 。 其 实 ， 基 于 react-native-camera 可 以 拓展 一 个 二 维 码 的 功能 ， 
这 里 就 不 详细 介绍 了 。 


4.10 VibrationlOS 


使 用 微 信 的 “ 摇 一 摇 ” 功 能 时 ， 会 发 出 声音 ， 这 是 对 用 户 的 一 个 听觉 的 提醒 。 如 果 关 闭 了 声 
音 ， 会 通过 “振动 ”表示 我 们 摇 到 了 一 首 歌曲 或 者 一 个 电视 频道 。React Native 在 iOS 上 通过 
VibrationIOS API 来 实现 这 个 功能 。 


VibrationIOS API 只 有 一 个 方法 ,， 那 就 是 vibrate()。 如 果 调 用 vibrate() 方 法 ， 移 动 设备 就 会 
出 现 1 秒 钟 的 振动 效果 。 如 果 该 设备 不 支持 VibrationIOS， 也 不 会 出 现 负 作用 。 


在 模拟 咒 中 , 我 们 是 无 法 模拟 振动 效果 的 ， 需 要 在 真 机 上 才能 体验 到 真实 效果 。 上 具体 的 代码 
很 简单 ， 如 下 所 示 : 


var React = require('react-native'); 
var { 

AppRegistry, 

StyleSheet, 

Text， 

View, 

VibrationIOS 
} = React; 


var App = React.createClass({ 
render: function(){ 
return( 
<View> 
<Text onpress={this.vibration} style={styles.btn}> 振 动 一 下 </Text> 
</View> 
); 
} 
vibration: function(){ 
VibrationIOS.vibrate(); 
上 
}); 
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var styles = StyleSheet.create({ 
btn:{ 

marginTop:50, 
marginLeft:10, 
marginRight:10, 
height:35， 
backgroundColor: '#3BC1FF ， 
color: '#fff 
lineHeight:24, 
fontweight: bold ， 
textAlign: centeT 

]); 


AppRegistry.registerComponent('App', () => App); 


4.11 Geolocation 


现在 是 移动 互联 网 时 代 ， 移 动 设备 越 来 越 多 ，App 也 越 来 越 丰 富 。 基 于 位 置 的 服务 ( LBS ) 
也 成 为 了 App 必 不 可 少 的 功能 。 目 前 ， 国 内 高 德 地 图 、 百 度 地 图 就 提供 了 LBS 服 务 ， 国 外 Google 
也 提供 了 该 项 服务 。LBS 最 基础 的 是 获取 位 置信 息 ， 因 此 Geolocation ( 地 理 定 位 ) 显得 十 分 重要 。 
React Native 也 对 Geolocation 进 行 了 封装 ， 提 供 了 Geolocation API。 


4.11.1 ”Geolocation 介绍 


Geolocation 的 功能 如 同 HTML5 Geolocation 一 样 ， 用 过 HTML5 Geolocation 的 同学 对 此 应 该 十 
分 熟悉。 我 们 需要 在 项 目的 Info.list 中 添加 NSLocationWhenInUseUsageDescription 的 key， 才 能 开 
启 该 功能 。 当 我 们 使 用 react-native init 命 令 创 建 React Native 的 项 目 时 ， 默 认 会 开启 地 理 定位 
功能 。 Geolocation 的 实现 标准 可 以 参考 https://developer.mozilla.org/en-US/docs/Web/API/ 
Geolocation。 


Geolocation 提 供 的 静态 方法 如 下 。 


口 getCurrentPosition(successCallback,，errorCallback，Geo0ptions): 用 于 获取 当前 的 位 
置 。 其 参数 successCallback 是 成 功 回 调 函 数 ,ertrorCallback 是 失败 回调 函数 ，Geo0ptions 

是 传递 的 参数 。 当 前 ，Geo0ptions 支 持 的 属性 有 : timeout (指定 获取 地 理 位 置信 息 时 的 
超时 时 长 ， 其 单位 为 毫秒 。 如 果 超 时 ， 则 触发 失败 回调 函数 )、maximumAge ( 重复 获取 定 
时 时 指定 多 和 久 再 次 获取 ， 其 单位 为 毫秒 )、enableHighAccuracy ( 其 值 为 true 或 者 false， 
指定 是 否 要 求 高 精度 的 地 理 位 置信 息 )。 

口 watchposition(successCallback，errorCallback，Geo0ptions): 监测 位 置 运动 。 

口 clearWatch(watchID): 依据 D 清 除 监 测 。 
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4.11.2 ”Geolocation 应 用 


尽管 我 们 可 以 在 模拟 器 上 调用 Geolocation， 但 是 在 模拟 器 的 定位 十 分 不 准 。 因 此 ， 建 议 打包 
后 在 真 机 上 测试 。 我 们 使 用 var Geolocation = require('Geolocation' ) 加 载 Geolocation API， 具 
体 的 代码 如 下 : 


Var React = require('react-native'); 
var { 

AppRegistry, 

StyleSheet, 

Text， 

View, 
} = React; 


var Geolocation = require('Geolocation'); 


var App = React.createClass({ 
render: function(){ 
return( 
<View> 
<Text onpress={this.vibration} style={styles.btn}> 获 取 位 置 </Text> 
</View> 
); 
}, 
vibration: function(){ 
Geolocation.getCurrentPosition(function(data){ 
alert(JSON. stringify(data)); 
}, function(){ 
alert(' 获 取 位 置 失败 '); 
)); 
} 
}); 


var styles = StyleSheet.create({ 
btn:{ 
marginTop:50, 
marginLeft:10, 
marginRight:10, 
height:35, 
backgroundColor: '#3BC1FF', 
color: '#fff", 
lineHeight:24, 
fontWeight:'bold', 
textA]ign: centeT 
} 
]) 


AppRegistry.registerComponent('catapp', () => App); 


打包 后 在 真 机 上 运行 的 效果 如 图 4-10 所 示 。 
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Alert 
{"timestamp": 
463761531441.418,"coords": 
{"altitude": 
13.19981479644775,"speed":-1,"latit 

ude": 
31.21310548186465,"longitude": 
121.3455695143098, "accuracy ": 

65, "altitudeAccuracy ": 


10,"heading":-1}} 


OK 


图 4-10 地理 定位 


目前 , 我 是 在 上 海 跑 的 示例 。 根 据 上 面 的 经 纬度 来 看 , 定位 相对 还 是 很 准 的 。 我 们 可 以 看 到 ， 
成 功 回 调 返 回 的 结果 如 下 所 示 : 


{ 
coords: { 
speed: -1， 
longitude: 121.3455563970114，// 经 度 
latitude: 31.21311039307059，// 纬 度 
altitude: 13.2847，// 高 程 
accuracy: 65， 
heading: -1， 
altitude: 0， 
altitudeAccuracy: 11.177 
】， 
timestamp: 463765121483.258 
} 


其 中 longitude 和 1atitude 就 是 我 们 需要 的 经 度 和 纬度 。 


4.12 数据 请 求 


打开 微 信 朋友 圈 ， 下 拉 刷 新 可 以 获取 更 多 的 朋友 状态 ; 打开 微 博 ,可 以 看 到 最 新 的 微 博 ; 打 
开支 付 宝 ,向 朋友 发 一 个 红包 ,这些 都 是 互联 网 的 作用 和 联系 。 在 Web 开 发 中 ， 之 所 以 能 够 请 求 
和 提交 数据 ,是 因为 浏览 器 实现 了 一 套 网 络 API， 以 便 我 们 可 以 通过 浏览 器 和 服务 端 交 互 。 同 样 ， 
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在 App 开 发 中 ， 网 络 也 是 必 不 可 少 的 。React Native 同 样 需要 实现 网 络 API。 但 是 ，React Native 遵 
循 了 浏览 器 的 实现 方式 ， 实 现 了 XMLHttpRequest API。 


4.12.1 XMLHttpRequest 


做 Web 开 发 的 同学 看 到 XMLHttpRequest 都 会 感觉 十 分 亲切 ， 这 是 因为 React Native 对 
XMLHttpRequest 的 实现 几乎 和 Web 一 样 。 它们 的 唯一 区 别 就 是 : React Native 中 , XMLHttpRequest 
API 不 存在 跨 域 的 限制 ， 而 是 作为 全 局 API 实 现 的 。 这 里 请 求 百 度 ( http://www.baidu.com/ ) 的 首 
页 ， 可 以 看 到 整个 页 面 被 抓 取 下 来 了 ， 具 体 代码 如 下 : 


_doXMLHttpRequest: function(){ 
var request = new XMLHttpRequest(); 
request.onreadystatechange = (e) => { 
if (request.readyState !== 4) { 
return; 
} 


if (request.status === 200) { 
console.log('success', request.responseText); 

} else { 

console.warn('error'); 

} 
}; 
request.open('GET', 'http://www.baidu.com/'); 
request.send(); 


当然 , 我 们 也 可 以 封装 成 Zepto Ajax 类 型 的 API。 同样 , 你 也 可 以 使 用 第 三 方 的 Ajax 库 来 代替 ， 
例如 superagent ( https://github.com/visionmedia/superagent )。 关 于 XMLHttpRequest 的 实现 标准 ,可 
以 参考 https://developer.mozilla.org/en-US/docs/Web/APL/XMLHttpRequest。 


4.12.2 Fetch 


相对 XMLHttpRequest 来 说 , Fetch 是 一 个 封装 程度 更 高 的 网 络 API, 它 已 经 通过 了 标准 委员 会 
并 在 Chrome 中 实现 。 在 React Native 中 ， 默 认 实 现 了 Fetch。 如 果 你 想 了 解 更 多 关于 Fetch 的 内 容 ， 
可 以 参考 https://fetch.spec.whatwg.org/。 例如 ， 我们 可 以 将 XMLHttpRequest 获 取 百 度 首页 数据 的 
代码 使 用 Fetch 代 蔡 ， 具 体 代 码 如 下 所 示 : 
_doFetch: function(){ 
fetch('http://www.baidu.com/') 


.then(function(data){ 
return data.text(); 


.then((responseText) => { 
console.log(responseText); 


.catch((error) => { 
console.warn(error); 
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上 
} 


这 里 我 们 希望 能 够 使 用 Fetch 封 装 一 个 支持 POST 请 求 的 简单 API， 具 体 代 码 如 下 所 示 : 


function postRequest (url, data, callback) { 
var opts = { 

method: 'POST', 

headers: { 
‘Accept': "application/json', 
'Content-Type': 'application/json’ 

} 

body: JSON.stringify(data) 

}; 


fetch(url, opts) 

.then((response) => response.text()) 

.then((responseText) => { 
callback(JSON.parse(responseText)); 


) 


} 
本 节 的 完整 代码 请 参考 https://github.com/vczero/React-Native-Code 的 第 4 章 4.12 节 。 


4.13 ”定时 器 


在 这 一 节 中 , 我 们 将 介绍 定时 器 API setTimeout 、setInterval 、setImmediate 和 Tequest- 
AnimationFrame， 这 些 都 是 遵循 浏览 器 API 标 准 实现 的 , 具体 可 以 参考 https://developer.mozilla.org/ 
en-US/Add-ons/Code_snippets/Timers。 在 这 一 节 中 , 我 们 只 是 概要 介绍 每 个 API， 而 不 会 具体 介绍 
其 用 法 ， 因 为 Web 开 发 者 对 这 些 API 都 十 分 熟悉 。 


4.13.1 setTimeout 


setTimeout 主 要 用 于 设 定 一 个 定时 任务 ,比如 打开 App 5 秒 后 开始 获取 用 户 的 位 置信 息 , 具体 
代码 如 下 : 


var timeoutID = setTimeout(function(){ 
var geo = require('Geolocation'); 
geo.getCurrentPosition(function(data){ 

alert(JSON. stringify(data)); 

}, function(e){ 
lert(JSON.stringify(e)); 

} 

了 


a 
) ; 

f(timeoutID){ 
clearTimeout (timeoutID); 


}, 5000); 
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4.13.2 setInterval 


setInterval 主 要 用 于 设 定 循环 执行 的 任务 ,例如 轮 播 图 。 这 里 ,我 们 使 用 setInterval 每 隔 5 
秒 钟 去 请 求 百度 的 首页 数据 ， 具 体 代 码 如 下 : 


setInterval(function(){ 


fetch('http://www.baidu.com/') 


.then(function(data){ 
return data.text(); 
}) 


.then((responseText) => { 


console.1log(responseText); 


a) 
.catch((error) => { 

console.warn(error); 
]); 


}, 5000); 


4.13.3 setImmediate 


setImmediate 主 要 用 于 设置 立即 执行 的 任务 ， 比 如 我 们 希望 程序 启动 后 立即 发 送 日 历 到 服务 


端 ， 便 于 统计 数据 : 


setImmediate(function(){ 
console.log(' 发 送 数 据 '); 
)); 


4.13.4 使 用 requestAnim 
我 们 可 以 使 用 setInterval 利 


ationFrame 开发 进度 条 


lsetTimeout 来 实现 动画 ,但 是 HTML5 的 出 现 ， 我 们 又 多 了 两 个 


选择 ， 那 就 是 CSS3 动 画 和 使 用 requestAnimationFrame 实 现 动 画 。 在 React Native 中 ， 这 可 以 通过 


requestAnimationFrame API 来 实现 。 


相对 setTimeout(fn，0) 来 说 ，requestAnimationFrame 具 有 很 强 的 优势 : 能 够 在 动画 流 刷新 后 


执行 , 即 上 一 个 动画 流 会 完整 执行 。 通 常 , 我 们 会 使 用 递归 和 requestAnimationFrame 来 实现 动画 。 
这 里 ， 我 们 使 用 React Native 开 发 个 简单 的 进度 条 ， 具 体 代 码 如 下 : 


Var React = require('react-native'); 


var { 
AppRegistry, 
StyleSheet, 
Text， 
View, 
} = React; 


var TimerMixin = require('react-timer-mixin'); 


var App = React.createClass({ 
mixins: [TimerMixin], 
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getInitialState: function(){ 
return{ 
width: 10 
}; 
}, 
render: function(){ 
var css = []; 
css.push(styles.progress); 
if(this. state.width){ 
css.push({width: this.state.width, marginTop:50}); 
} 


return 
<View> 
<View style={css}></View> 
</View> 
); 
}, 
componentDidMount: function(){ 
var that = this; 
function doAnimated(){ 
that.setState({ 
width: that.state.width + 10 
]); 
if( that.state.width < 290){ 
requestAnimationFrame(doAnimated); 
} 


} 


requestAnimationFrame(doAnimated); 


} 
}); 


var styles = StyleSheet.create({ 
progress:{ 
height:10, 
width:10, 
marginLeft:10, 
backgroundColor: '#E72D00 ， 
marginTop:10 
} 
]); 


AppRegistry.registerComponent('App', () => App); 
这 里 ， 我 们 需要 引入 TimerMixin。 我 们 需要 通过 npm 来 安装 它 : 


npm i react-timer-mixin --save 


4.13.5 ”完整 代码 


为 了 更 好 地 展示 以 上 定时 器 函数 的 用 法 ， 本 书 提供 了 一 个 完整 的 例子 供 大 家 参考 ， 可 前 往 
https://github.com/vczero/React-Native-Code 项 目 第 4 章 4.13 节 查看 。 
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移动 终端 的 发 展 是 爆炸 式 的 ， 比 如 苹果 移动 设备 ,一 年 一 个 大 版 本 的 系统 更 新 ， 持 续 地 引信 
了 Touch ID 、3D Touch 等 全 新 的 功能 以 及 API。 同 时 在 开发 者 社区 中 ， 开 发 者 也 在 不 断 贡 献 代 码 ， 
现在 GitHub 上 已 经 托管 了 三 万 六 千 多 个 活跃 的 Objective-C 项 目 。 在 这 样 的 背景 下 , 选择 使 用 React 
Native 开 发 移动 应 用 时 ， 难 免 遇 到 以 下 情况 。 
口 需要 使 用 React Native 未 封装 的 原生 功能 。 
口 重用 已 有 的 原生 组 件 或 者 第 三 方 组 件 。 
口 多 线程 调用 以 及 高 性 能 要 求 的 功能 ， 例 如 加 密 、 数 据 库 、 图 形 处 理 等 。 

对 于 这 些 问题 ，Facebook 自 然 不 会 毫 无 准备 ，React Native 提 供 了 非常 简单 的 规范 ， 人 允许 开发 
者 自行 根据 需求 来 扩展 原生 组 件 。 本 章 将 介绍 如 何 创建 一 个 自 定义 的 Native 模 块 。 


5.1 通信 机 制 


React Native 作 为 一 个 JavaScript 跨 终端 框架 , 与 终端 原生 语言 之 间 的 交互 是 必 不 可 少 的 。 在 React 
Native 推 出 之 前 ， 如 果 想 用 JavaScript 来 开发 ， 通 常会 选择 混合 模式 Hybrid， 其 最 典型 的 框架 就 是 
Cordova。 它 同样 提供 了 JavaScript 类 库 来 调用 原生 的 设备 功能 ， 这 类 应 用 使 用 UIWebView 作 为 主要 
界面 ， 通 过 向 WebView 请 求 加 载 特殊 URL 的 方式 来 调用 原生 功能 ， 最 后 调用 UIWebView 的 
stringByEvaluatingJavaScriptFromString 接 口 执行 JavaScript 脚 本 传递 数据 。React Native 中 的 交互 与 
上 述 Hybrid 应 用 有 着 相似 之 处 ，React Native 使 用 JavaScriptCore 框 架 提供 的 JavaScript 运 行 环境 , 通过 
调用 evaluateScript 方 法 执行 特定 的 JavaScript 脚 本 来 传递 数据 ， 完 成 Objective-C 和 JavaScript 代 码 之 
间 的 交互 。 与 Hybrid 应 用 相 比 ，React Native 中 JavaScript 构 建 的 界面 完全 基于 原生 组 件 , 原生 界面 的 
用 户 体验 优 于 UIWebView 则 是 毫 无 疑问 的 。 当 然 , 这 也 是 利用 JavaScript 与 原生 语言 的 交互 来 实现 的 。 


5.1.1 模块 配置 映射 
在 深入 介绍 细节 之 前 ,我 们 不 妨 思考 一 下 , 在 编码 中 调用 一 个 功能 需要 什么 。 很 简单 ， 这 需 
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要 知道 实现 功能 的 是 哪 一 个 类 的 哪 一 个 方法 ， 需 要 传人 什么 参数 即 可 。React Native 也 是 如 此 ， 
当 JavaScript 调 用 Native 模 块 时 ， 必 须 包含 模块 、 方 法 和 参数 的 信息 ， 从 而 定位 具体 调用 了 哪个 模 
块 的 哪个 方法 。 此 时 需要 一 个 模块 的 配置 信息 映射 表 , 来 作为 双方 通信 的 桥梁 。 现 在 ,第 一 个 问 
题 就 是 React Native 如 何 提供 这 个 模块 配置 映射 表 。 


在 React Native 加 载 的 时 候 ， 所 有 注册 并 且 符 合 规范 的 模块 都 会 被 导出 ， 生 成 对 应 的 模块 数 
据 类 RCTModuleData ， 而 模块 数据 中 缓存 了 模块 的 对 象 实 例 ， 以 及 模块 索引 ModuleID: 


//RCTBatchedBridge.m 


- (void)initModules { 


module DataByID = [NSMutableArray new] ; 
for (Class moduleClass in RCTGetModuleClasses()) { 
NSString* moduleName = RCTBridgeModuleNameForClass(moduleClass); 


// 实 例 化 模块 类 
module = [moduleClass new]; 


modulesByName [moduleName] = module; 


} 
for (id<RCTBridgeModule> module in modulesByName.allValues) { 


// 生 成 索引 ModuleID， 从 0 开始 计数 

//RCTModuleData 对 象 缓存 了 ModuleID、Module 实 例 和 JavaScript 执 行 器 

RCTModuleData *moduleData = [[RCTModuleData alloc] 
initWithExecutor: javaScriptExecutor 
moduleID:@(_moduleDataByID. count) 
instance:module]; 

[_moduleDataByID add0bject:moduleData] ; 

} 


A 


在 RCTModuleData 模 块 数据 中 , 当前 模块 所 有 的 模块 方法 都 会 通过 Objective-C 运 行 时 方法 被 导 
出 ， 生 成 模块 方法 类 RCTModuleMethod。 而 RCTModuleMethod 对 象 缓存 了 原生 方法 与 JavaScript 方 法 
的 对 应 关系 以 及 模块 的 实例 ， 并 且 在 生成 配置 的 时 候 会 顺序 生成 索引 MethodID: 


//RCTModuleData.m 


- (NSArray *)methods 
' 


NSArray *entries = ((NSArray *(*)(id,SEL))imp)( moduleClass, selector); 
RCTModuleMethod *moduleMethod = 
[[RCTModuleMethod alloc] initwithObjCMethodName:entries[1] 
JSMethodName:entries[0] 
moduleClass: moduleClass]; 
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[moduleMethods addObject:moduleMethod]; 


- (NSDictionary *)config 
{ 


methodconfig[method.JSMethodName] = @{ 
@"methodID": @(idx), 
@"type": method.functionKind == 
RCTJavaScriptFunctionKkindAsync ? @"remoteAsync" : @"remote", 


理 完 之 后 ， 会 为 JavaScript 模 块 生成 一 份 模块 配置 表 ， 其 中 包含 模块 名 、JavaScript 方 
数 、ModuleID 和 MethodID: 


2 
Wb 全 


"remoteModuleConfig": { 


"RCTWebSocketManager": { 
"constants": ...， 
"methods": { 
"connect": {"type":"remote", "methodID":0}, 
"send":{"type":"remote", "methodID":1}, 
"close":{"type":"remote", "methodID":2} 


} 


"moduleID":11 


} 
} 


最 终 , 这 份 配 置信 息 会 通过 调用 [ javaScriptExecutor injectJSONText:asGlobal0bjectNamed: 
callback:] 向 JavaScript 端 注册 ， 生 成 对 应 的 JavaScript 模 块 对 象 和 方法 。 


通过 配置 表 ， 我 们 可 以 很 清晰 地 将 调用 的 JavaScript 方 法 映射 到 对 应 的 Native 模 块 方法 上 了 。 


5.1.2 ”通信 流程 


既然 模块 配置 信息 已 经 生成 ,那么 现在 的 问题 就 是 如 何 使 用 配置 信息 来 完成 JavaScript 模 块 与 
Native 模 块 之 间 的 相互 调用 ， 具 体 如 图 $-1 所 示 。 

JavaScript 会 维护 一 个 MessageQueue 。 当 调用 模块 的 方法 时 ， 调 用 会 被 解析 为 模块 名 
ModuleName、 模块 方法 MethodName、 参数 Params 这 三 个 部 分 , 并 将 这 三 个 部 分 传递 给 MessageQueue， 
通过 前 面 生成 的 模块 配置 remoteModuleConfig 解 析 为 ModuleID 和 MethodID。 


MessageQueue 是 一 个 很 重要 的 模块 ， 所 起 的 作用 与 原生 代码 中 的 RCTBridge 类 似 , 都 提供 了 将 
模块 方法 调用 与 模块 通信 数据 相互 转换 的 功能 。 同时 , MessageQueue 提 供 了 4 个 接口 , React Native 
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就 是 通过 在 RCTBridge 中 调用 特定 的 接口 来 完成 JavaScript 与 Native 之 间 的 通信 。 

口 processBatch: 获得 JavaScript 模 块 的 方法 调用 。 

口 invokeCallbackAndReturnFlushedQueue: 调用 JavaScript 模 块 执行 时 传递 的 回调 函数 。 
口 callFunctionReturnFlushedQueue: 人 处理 Objective-C 对 JavaScript 模 块 的 功能 调用 。 

口 flushedQueue: 用 于 刷新 MessageQueue 队 列 。 


JavaScript 


Call NativeModule.Method(...) .站 …… callFunctionReturnFlushedQueue 


invokeCallbackAndReturnFlushedQueue 


ModuleName -> ModuleID 


MethodName -> MethodID | Message0ueue *} …}…CallbackID -> callback(args) 
callback(args) -> CallbackID y 


[ModuleID,MethodID,CallbackID,Args] pv | | 1 [callFunctionMethod,CallbackID,Args] 


Objective-C 


ModuleID -> ModuleClass 
MethodID -> Method 9 RCTModuleData .|.. pe a 
CallbackID -> block rgs Conver 


Args Convert 


ModuleClass,Method(Args,block) ieee | | callback(Args)/callFunction 


5-1 JavaScript 模 块 调用 Native 模 块 


如 果 调 用 参数 中 包含 了 回调 函数 ，MessageQueue 会 将 参数 Params 中 的 回调 函数 缓存 在 本 地 ， 
并 生成 一 个 CallbackID 来 代替 。 最 终 将 JavaScript 调 用 以 ModuleID 、MethodID 、Params 的 形式 缓存 
起 来 传递 给 Native: 


_nativeCall(module，method，pazrams，onFail，onSucc) { 


onFail 8& params.push(this. callbackID); 
this. callbacks[this. callbackID++] = onFail; 
onSucc 8& params.push(this. callbackID); 
this. callbacks[this. callbackID++] = onSucc; 


this. queue[MODULE IDS].push(module); 
this. queue[METHOD IDS].push(method); 
this. queue[PARAMS].push(params); 


} 


这 里 并 不 是 由 JavaScript 模 块 主动 将 数据 传递 给 Native 模 块 的 ， 而 是 由 Native 模 块 主动 调用 
MessageQueue 的 接口 ( processBatch )， 该 接口 的 返回 值 为 MessageQueue 队 列 中 缓存 的 JavaScript 调 
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用 的 消息 数据 ( [ModuleID，MethodID，pParams] )。 
Native 获 得 消息 数据 之 后 ， 通 过 ModuleID 索 引 到 对 应 模块 对 象 RCTModuleData， 


然后 在 模块 对 


象 中 通过 MethodID 索 引 到 模块 方法 RCTModuleMethod, 这 样 就 定位 到 调用 的 JavaScript 模 块 方法 所 对 


应 的 Native 模 块 方法 : 
//RCTBatchedBridge.m 


- (BOOL) handleRequestNumber: (NSUInteger)i 
moduleID: (NSUInteger)moduleID 
methodID: (NSUInteger)methodID 

params: (NSArray *)params 


// 根 据 ModuleID 映 射 原生 模块 
RCTModuleData *moduleData = moduleDataByID[moduleID]; 


// 根 据 MethodID 映 射 模块 方法 
RCTModuleMethod *method = moduleData.methods[methodID]; 


// 转 换 参 数 ， 调 用 方法 
[method invokewithBridge:self module:moduleData.instance arguments:params ] ; 


} 


JavaScript 异 块 与 Native 模 块 之 间 的 数据 是 以 JSON 类 型 来 传递 的 , 而 且 Native 模 块 方法 的 参数 
必须 使 用 Native 的 类 型 。 因 此 ， 在 方法 实现 之 前 ， 需 要 将 JavaScript 传 递 的 参数 Params 根 据 对 应 模 
块 方法 的 参数 类 型 进行 处 理 。 在 RCTModuleMethod 中 , 框架 会 通过 运行 时 方法 来 获取 模块 方法 的 参 
数 类 型 ， 然 后 将 JSON 数 据 转换 为 对 应 的 Native 类 型 参数 ， 而 对 于 回调 函数 CallbackID， 则 会 转换 


为 一 个 block 函 数 来 蔡 换 。 最 后 ， 再 由 RCTModuleMethod 完 成 方法 的 调用 : 


- (void)processMethodSignature 


{ 
_selector = NSSelectorFromString(objCMethodName); 
NSMethodSignature *methodSignature = [_moduleClass instanceMethodSignatureForSelector: selector]; 
NSInvocation *invocation = [NSInvocation invocationWithMethodSignature:methodSignature]; 
// 获 得 参数 数量 
NSUInteger numberOfArguments = methodSignature.numberOfArguments; 
for (NSUInteger i = 2; i < numberOfArguments; i++) { 
// 获 得 参数 类 型 
const char *objcType = [methodSignature getArgumentTypeAtIndex:i]; 
// 参 数 转换 
} 
} 


如 果 模 块 方法 定义 了 回调 函数 ， 那 模块 功能 代码 执行 完毕 后 , 需要 执行 回调 函数 。 青 来 看 看 
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RCTModuleMethod 在 参数 转换 时 做 了 什么 处 理 ， 回调 函 数 中 调用 了 MessageQueue 的 接口 
invokeCallbackAndReturnFlushedoueue ,将 CallbackID 以 及 参数 ( 需要 序列 化 成 JNON 数 据 ) 传递 
给 MessageQueue ， 最 终 由 MessageQueue 再 通过 CallbackID 找 到 之 前 缓存 的 callback 函 数 ， 执 行 
JavaScript 回 调 ， 这 样 就 完成 了 一 次 JavaScript 模 块 调用 Native 模 块 的 流程 : 


//RCTModuleMethod.m 


[bridge _invokeAndProcessModule:@"BatchedBridge" 
method:@"invokeCallbackAndReturnFlushedQueue" 
arguments:@[json, args]]; 


//MessageQueue.js 


_ invokeCallback(cbID, args) { 
let callback = this. callbacks[cbID]; 
callback.apply(null, args); 

: i 


在 JavaScript 端 ， 也 会 生成 一 份 本 地 模块 配置 localModules ，Native 模 块 可 以 通过 enqueue- 
]SCall:args: 直接 调 用 JavaScript 模 块 方法 ， 这 也 是 通过 传递 ModuleID 和 MethodID 来 调用 的 。 与 前 
面 Native 模 块 中 对 回调 函数 的 处 理 相 同 ， 通 过 调用 MessageQueue 的 cal1FunctionReturnFlushed- 
Queue 接 口 实现 这 个 流程 : 


/沙沙 
* This method is used to call functions in the JavaScript application context. 
* It is primarily intended for use by modules that require two-way communication 
* with the JavaScript code. Safe to call from any thread. 
和 

- (void)enqueueJSCall:(NSString *)moduleDotMethod args:(NSArray *)args; 

React Native 在 这 个 基础 上 提供 了 在 JavaScript 模 块 中 对 于 Native 模 块 事件 的 监听 处 理 : 在 
JavaScript 端 注册 事件 响应 函数 , 通过 Native 端 发 出 事件 通知 , 然后 JavaScript 接 受 通知 后 执行 对 应 
事件 的 响应 。 我 们 也 可 以 通过 这 个 功能 间接 地 实现 对 JavaScript 模 块 的 调用 , 具体 用 法 在 后 面 章 节 
中 会 有 介绍 。 

React Native 的 通信 流程 大 致 就 是 这 样 ， 如 果 你 非常 感 兴趣 ， 可 以 继续 深入 了 解 相关 的 源 代 
码 ， 其 中 的 设计 思想 以 及 具体 实现 都 非常 值得 学 习 。 


5.2 自 定 义 Native API 组件 


在 第 4 章 中 ， 我 们 介绍 了 React Native 目 前 已 经 提供 了 很 多 基础 的 API 实 现 ， 例 如 网 络 状态 、 
应 用 状态 、 摄 像 头 等 功能 。 而 在 实际 的 开发 过 程 中 ， 经 常会 面临 更 加 复杂 的 需求 ， 图 像 识 别 、 数 
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据 加 密 、 缓存 优化 等 等 , 这 时 React Native 提 供 的 API 已 经 无 法 满足 了 这 些 新 需求 了 。 在 这 一 节 中 ， 
我 们 会 告诉 大 家 如 何 定 义 自己 的 API 组 件 。 


5.2.1 模块 和 方法 定义 


一 个 普通 的 Objective-C 类 以 及 方法 ,并 不 会 被 系统 处 理 成 模块 进而 被 调用 。 模块 必 须 在 编译 
及 运行 时 向 系统 注册 ， 同 时 告诉 系统 什么 属性 和 方法 可 以 被 JavaScript 调 用 。 
模块 类 必须 遵循 RCTBridgeModule 协 议 。 


//CalendarManager.h 
#import "RCTBridgeModule.h" 


@interface CalendarManager : NSObject <RCTBridgeModule> 

@end 

RCTBridgeModule 协 议 中 定义 了 一 些 模块 的 基本 属性 和 方法 以 及 一 些 宏 命令 ,我 们 可 以 通过 调 
用 对 应 的 宏 命 令 来 告诉 React Native 哪 些 是 我 们 的 模块 类 ， 哪 些 是 需要 暴露 的 模块 方法 : 


RCT_EXPORT_ MODULE // 向 系统 注册 模块 
RCT_EXPORT_METHOD // 暴 露 模块 方法 


在 类 实现 中 ， 需 要 调用 宏 RCT_EXPORT_MODULE(...); 来 导出 模块 类 。 如 果 需 要 自 定义 模块 名 ， 
在 宏 命 令 中 传人 模块 名 作为 参数 即 可 ， 如 果 不 填 ， 则 默认 会 使 用 类 名 来 作为 模块 名 : 


//CalendarManager.m 
@implementation CalendarManager 


RCT_EXPORT MODULE(); 


@end 

模块 名 在 JavaScript 被 映射 时 ， 如 果 模 块 名 前 缀 包含 RCT， 会 被 格式 化 去 除 ， 例 如 原生 模块 
RCTActionSheetManager 在 JavaScript 中 的 模块 名 为 ActionSheetManager。 模 块 类 完成 映射 后 , 会 在 
JavaScript 中 生成 一 个 模块 对 象 以 供 调用 : 

var MyModule = require('NativeModules').ModuleName; 

作为 模块 方法 ， 同 样 需要 使 用 宏 RCT_EXPORT_METHOD(method) 的 封装 将 方法 显 式 导出 到 
JavaScript。 宏 命令 中 实现 了 JavaScript 访 法 与 Objective-C 方 法 的 映射 , 会 使 用 Objective-C 方 法 的 第 
一 个 部 分 作为 JavaScript 的 方法 名 。 如 果 需 要 自 定 义 JavaScript 模 块 的 方法 ， 可 以 使 用 安 
RCT_EXPORT_METHOD(js_name，method) 来 代替 : 


//Objective-C 


RCT_EXPORT_METHOD(doSomething: (NSString *)aString 
withA: (NSInteger)a 
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andB: (NSInteger)b) 


NativeModules.ModuleName.doSomething(aString,a,b); 


JavaScript 和 Objective-C 是 两 个 完全 不 同 的 语言 , 所 支持 的 数据 类 型 也 各 不 相同 , 如 果 之 间 需 
要 通信 ， 那 必须 完成 数据 类 型 的 转换 。React Native 中 双方 的 通信 数据 采用 JSON 类 型 来 传递 ， 


此 支持 标准 JSON 的 类 


string (NSString) 
number (NSInteger, 


型 都 是 支持 的 : 


float, double, CGFloat, NSNumber) 


boolean (BOOL, NSNumber) 


array (NSArray) of 
map (NSDictionary) 


any types from this list 
with string keys and values of any type from this list 


function (RCTResponseSenderBlock) 

执行 Native 模 块 方法 前 ，RCTModuleMethod 会 根据 Native 方 法 定义 的 参数 类 型 通过 
RCTConvert.h 进 行 转换 。 在 RCTConvert.h 中 ， 除 了 支持 JSON 标 准 类 型 外 ， 也 支持 一 系列 常用 类 
型 ， 例 如 日 期 类 型 的 数据 : 


//JavaScript 


CalendarManager.addEvent('Birthday Party', '4 Privet Drive, Surrey', date.toTime()); 


//Objective-C 


RCT_EXPORT_ METHOD(addEvent: (NSString *)name location: 
(NSString *)location date:(NSDate *)date) 


//date 已 经 被 自动 转换 为 NSDate 类 型 


} 


这 些 类 型 包括 但 不 局 限于 以 下 类 型 ( 具体 可 以 查看 RCTConver.h ): 


DQ UIColorArray.、 


5.2.2 回调 函数 


口 NSDate、 UIColor、 UIFont、 NSURL、NSURLRequest、UIImage... 


NSNumberArray 、NSURLArray ... 


口 NSTextAlignment 、NSUnderlineStyle... 
DQ COPoint 、 CoSize... 


React Native 定 义 了 几 种 类 型 的 块 函 数 来 作为 回调 函数 ，RCTModuleMethod 以 及 MessageQueue 
会 根据 不 同 的 类 型 来 作对 应 的 处 理 。Native 中 定义 的 回调 函数 在 执行 时 都 会 将 数据 传递 给 


JavaScript 环 境 ， 来 执行 对 应 的 JavaScript 函 数 。 


口 (^RCTResponseSenderBlock) (NSArray *): 接收 多 个 参数 的 回调 函数 。 
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口 (^RCTResponseErrorBlock)(NSError *) : 接收 错误 参数 的 回调 函数 。 
口 (^RCTPromiseResolveBlock)(id result) : 处 理 Promise Resolve。 
口 (^RCTPromiseRejectBlock)(NSError *): 处 理 Promise Reject。 


一 般 情 况 下 ， 我 们 都 使 用 RCTResponsesenderBlock 来 作为 回调 函数 ， 此 时 只 需要 将 一 个 
NSATTay 对 象 传人 块 函数 执行 即 可 : 


RCT_EXPORT METHOD(findEvents: (RCTResponseSenderBlock)callback) 
{ 

NSArray *events = ... 

callback(@[ [NSNull null], events]); 


如 果 需 要 使 用 回调 函数 , 则 要 在 JavaScript 调 用 模块 方法 时 在 对 应 的 参数 上 定义 回调 函数 , 在 
Native 端 执行 回调 时 ，JavaScript 回 调 函 数 也 将 被 执行 。 如 果 需 要 使 用 回调 函数 中 的 参数 ， 定 义 回 
调 函 数 参数 的 顺序 就 要 与 Native 模 块 中 传人 的 NSArray 中 的 对 象 顺序 保持 一 致 , 这 样 才 可 以 接收 到 
正确 的 参数 。 例 如 ，Native 模 块 中 回调 函数 传人 的 第 一 个 参数 是 error 对 象 ， ee 
函数 定义 的 第 一 个 参数 将 会 被 赋 于 这 个 error 对 象 的 JSON 值 。 如 果 不 需 要 使 用 回调 函数 ， 无 需 
义 回 调 孔 数 即 可 ， 并 不 会 影响 正常 运行 : 


CalendarManager.findEvents((error, events) => { 
if (error) { 
console.error(error); 
} else { 
this.setState({events: events}); 
} 
}) 


当然 ， 块 函数 允许 被 缓存 起 来 延 后 执行 ， 例 如 RCTAlertManager 在 alertWithArgs:callback: 
方法 中 将 回调 函数 callback 缓 存 ， 当 用 户 点 击 控件 后 , 在 代理 事件 中 调用 callback, 并 释放 缓存 。 
当 我 们 这 样 使 用 的 时 候 , 一 定 要 确保 手动 缓存 的 实例 会 被 释放 , 来 防止 内 存 泄漏 。 示例 代码 如 下 : 
RCT_EXPORT METHOD(alertWithArgs: (NSDictionary *)args 


callback: (RCTResponseSenderBlock)callback) 
4 


_alerts addObject:alertView]; 
_alertCallbacks addObject:callback ?: ^(_ unused id unused) {}]; 


void)alertView: (UIAlertView *)alertView clickedButtonAtIndex: (NSInteger)buttonIndex 


RCTResponseSenderBlock callback = alertCallbacks[index]; 
callback(args); 
_alertCallbacks removeObjectAtIindex:index]; 
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如 果 需 要 传递 错误 信息 给 回调 函数 ， 则 使 用 RCTResponseErrorBlock 时 , 方法 的 参数 部 分 可 以 
直接 传人 NSError 对 象 。 一 般 来 说 ， 当 我 们 希望 在 JavaScript 定 义 的 方法 中 区 分 正确 返回 和 错误 返 
回 时 ,会 使 用 RCTResponseErrorBlock 回 调 。 当 然 ， 也 可 以 像 上 例 中 那样 ， 将 错误 作为 第 一 个 参数 
来 表示 执行 成 功 与 否 。 因 为 NSError 不 是 默认 支持 转换 的 数据 类 型 ， 所 以 不 能 直接 传递 NSError 对 
象 实例 ， 而 需要 使 用 RCTUtil.h 的 RCTMakeError。 


此 外 ，React Native 还 支持 Promise 规 范 的 异步 编程 模式 。 在 支持 Promise 规 范 的 Native 模 块 方 
法 中 ， 最 后 两 个 参数 必须 强制 定义 为 RCTPromiseResolveBlock 和 RCTPromiseRejectBlock: 


RCT_EXPORT METHOD(doSomethingAsync: (NSString *)aString 
resolver: (RCTPromiseResolveBlock)resolve 
rejecter: (RCTPromiseRejectBlock)reject 


if ( error ) { 
reject(error); 

} else { 
resolve(data); 


} 


| 5 
调用 方法 时 ， 可 以 通过 链 式 执行 then 方 法 来 处 理 RCTPromiseResolveBlock 的 调用 ， 执行 catch 
方法 来 处 理 RCTPromiseRejectBlock 的 调用 : 


NativeModules.ModuleName.doSomethingAsync(aString) 
.then( 
(data) => { ... }) 
.catch( 
(err) => { ...} 
); 


5.2.3 ”线程 


JavaScript 代 码 都 是 单线 程 运行 的 ,而 在 Native 模 块 中 , 线程 问题 自然 而 然 会 被 关注 。 在 React 
Native 中 ， 所 有 的 Native 模 块 都 默认 运行 在 各 自 独 立 的 GCD 串 行 队列 上 。 如 果 需 要 特别 指定 某 个 
线程 队列 ， 可 以 通过 - (dispatch_queue t)methodoueue 方 法 实现 : 


- (dispatch queue t)methodQueue 
{ 


return dispatch queue create("com.facebook.React.NameQueue", 
DISPATCH QUEUE SERIAL); 
} 


模块 中 所 有 的 模块 方法 都 会 运行 在 同一 线程 队列 中 , 如果 某 些 方法 需要 单独 指定 队列 , 可 以 
使 用 dispatch _ async: 


RCT_EXPORT_METHOD(doSomethingExpensive: (NSString *)param 
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callback: (RCTResponseSenderBlock)callback) 
{ 
dispatch async(dispatch get global queue( 
DISPATCH QUEUE PRIORITY DEFAULT, 0), ^{ 
//Call long-running code on background thread 


//You can invoke callback from any thread/queue 
callback(@[...]); 

]); 
} 


如 果 多 个 模块 需要 共享 一 个 线程 队列 ,那么 我 们 必须 手动 缓存 共享 的 队列 实例 ， 并 在 
methodQueue 中 返回 共享 实例 ， 而 不 是 创建 一 个 相同 标签 的 实例 。 


5.2.4 常量 导 


React Native 还 支持 Native 模 块 暴露 一 些 常量 数据 供 JavaScript 模 块 方法 使 用 ， 主 要 有 以 下 用 法 。 
口 Native 组 件 中 的 常量 值 ， 例 如 版 本 和 事件 名 称 等 。 

口 Native 中 定义 枚 举 在 JavaScript 中 使 用 的 对 应 值 。 

口 边界 定义 ， 例 如 控件 允许 的 最 小 尺寸 或 者 默认 尺寸 等 。 

可 以 定义 一 些 默认 值 以 及 一 些 参数 的 枚 举 值 来 提高 使 用 JavaScript 时 的 可 读 性 。 

通过 实现 constantsToExport 方 法 ， 可 以 返回 一 个 字典 对 象 


- (NSDictionary *)constantsToExport 


{ 
return @{ @"firstDayOfTheWeek": @"Monday” }; 


在 JavaScript 中 ， 可 以 直接 访问 字典 的 key 值 来 访问 字典 对 象 : 

//Monday 

CalendarManager.firstDayOofTheWeek 

常量 会 在 框架 初始 化 期 间 被 导出 到 模块 配置 表 中 ,并 在 生成 JavaScript 模 块 对 象 时 并 入 该 对 象 

因此 ， 在 运行 时 对 constantsToExport 的 字典 的 任何 修改 将 无 法 生效 。 

上 面 提 到 , 可 以 在 常量 导出 中 将 枚 举 类 型 NS_ENUM 导 出 以 供 JavaScript 作 为 参数 来 使 用 。 但 是 问 

题 来 了 ， 通 过 常量 导出 枚 举 变量 时 ， 枚 举 的 值 都 是 以 整 型 数字 存储 的 。 那 么 ， 在 JavaScript 中 调用 

模块 方法 ， 将 常量 导出 中 的 枚 举 值 作为 参数 传递 到 Native 时 ， 对 于 React Native 而 言 ， 我 们 只 是 单 

纯 地 传递 了 一 个 整 型 参数 。 因 此 ， 我 们 需要 为 自 定义 的 枚 举 类 型 进行 RCTConvert 扩 展 ， 这 样 在 模 

块 方法 调用 中 使 用 常量 导出 的 枚 举 值 ， 通 信 到 Native 中 时 ， 会 从 整 型 自动 转换 为 定义 的 枚 举 类 型 。 
定义 一 个 枚 举 : 


typedef NS_ENUM(NSInteger，UIStatusBarAnimation) { 
UIStatusBarAnimationNone, 


中 


中 
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UIStatusBarAnimationFade, 
UIStatusBarAnimationSlide, 


}; 
实现 RCTConvert 对 于 UIStatusBarAnimation 类 型 的 扩展 : 


@implementation RCTConvert (StatusBarAnimation) 


RCT_ENUM CONVERTER( 

UIStatusBarAnimation, 

(@{ @"statusBarAnimationNone": @(UIStatusBarAnimationNone), 
@"statusBarAnimationFade": @(UIStatusBarAnimationFade), 
@"statusBarAnimationSlide" : @(UIStatusBarAnimationSlide), 

UIStatusBarAnimationNone, integerValue) 


@end 
然后 在 常量 导出 中 会 返回 对 应 的 枚 举 值 : 


- (NSDictionary *)constantsToExport 
{ 
return @{ @"statusBarAnimationNone" : @(UIStatusBarAnimationNone), 
@"statusBarAnimationFade" : @(UIStatusBarAnimationFade), 
@"statusBarAnimationSlide" : @(UIStatusBarAnimationSlide) } 


}; 
在 JavaScript 方 法 调用 中 ， 只 要 将 枚 举 类 型 的 参数 位 置 传 人 模块 常量 导出 中 对 应 的 值 ， 例 如 
Module.statusBarAnimationSlide ， 这 个 参数 在 Native 模 块 中 就 会 被 自动 转换 为 对 应 的 枚 举 类 型 


UIStatusBarAnimation: 


//Native 
RCT_EXPORT METHOD(updateStatusBarAnimation: (UIStatusBarAnimation)animation 
completion: (RCTResponseSenderBlock)callback); 


//JavaScript 
Module.updateStatusBarAnimation(Module.statusBarAnimationSlide, callback 


); 


5.2.5 事件 


React Native 在 Native 向 JavaScript 传 递 消息 机 制 的 基础 上 实现 了 一 个 非常 低 耦 合 的 消息 事件 
订阅 系统 ，Native 通 过 RCTEventDispatcher 疝 JavaScript 端 的 EventEmitter 模 块 发 送 事件 消息 ， 由 
EventEmitter 模 块 通知 该 事件 的 订阅 者 来 执行 事件 的 响应 。 在 大 多 数 场景 下 ， 只 需要 使 用 这 种 通 
知 的 方式 间接 完成 Native 对 JavaScript 的 调用 。 


首先 ， 在 JavaScript 端 对 事件 进行 订阅 ， 并 且 添 加 事件 响应 函数 : 


hl 


var { NativeAppEventEmitter } = require('react-native'); 


var subscription = NativeAppEventEmitter.addlListener( 
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"EventReminder ， 
(reminder) => console.log(reminder.name) 
); 
当 在 Native 模 块 上 发 出 事件 通知 时 ，EventEmitter 模 块 则 会 执行 所 有 注册 EventReminder 事 件 
的 响应 函数 : 


// 引 入 RCTEventDispatcher 头 文件 
//#import "RCTEventDispatcher.h" 


[self.bridge.eventDispatcher sendAppEventWithName:@"EventReminder" 
body:@{@"name": eventName}]; 


React Native 定 义 了 不 同 的 接口 以 及 接收 者 来 区 分 事件 的 类 型 ; 


// 发 送 应 用 相关 的 事件 ， 例 如 数据 更 新 
//NativeAppEventEmitter 
- (void)sendAppEventWithName: (NSString *)name body:(id)body; 


// 发 送 设备 相关 的 事件 ， 例 如 地 理 定位 和 屏幕 旋转 

//DeviceEventEmitter 

- (void)sendDeviceEventWithName: (NSString *)name body:(id)body; 

最 后 ， 我 们 需要 在 合适 的 时 候 手动 取消 事件 的 订阅 subscription.remove();， 和 否则 这 个 订阅 
可 能 会 导致 内 存 泄漏 。 


5.2.6 ”实战 


前 面 我 们 简单 介绍 了 如 何 创建 Native 模 块 ， 现 在 创建 一 个 简单 的 Native 模 块 ， 作 为 对 已 有 功 
能 的 补充 。 通 过 该 模块 获得 当前 的 屏幕 尺寸 Dimensions， 并 且 提 供 注册 事件 监控 屏幕 方向 变化 。 
我 们 在 项 目 工程 中 创建 Native 模 块 类 RCTDeviceExtension， 它 继承 RCTBridgeModule 协 议 : 


#import "RCTBridgeModule.h" 
@interface RCTDeviceExtension : NSObject<RCTBridgeModule> 
@end 


然后 在 RCTDeviceExtension.m 中 将 该 类 注册 为 Native 模 块 类 


@implementation RCTDeviceExtension 
RCT_EXPORT MODULE(); 
@end 


// 在 JavaScript 代 码 中 查询 原生 模块 
console.1og(Tequire( "NativeModules ' ) ); 


运行 上 述 代 码 , 得 到 的 效果 如 图 5-2 所 示 ， 从 中 可 以 看 到 RCTDeviceExtension 模 块 已 经 被 加 载 


图 灵 社 区 会 员 蚂 蜂 (240671488@qq.com) 专 享 尊重 版 权 


5.2” 自 定义 Native API 组 件 区 191 


到 模块 配置 中 了 ， 同 时 在 JavaScript 模 块 中 生成 了 DeviceExtension 对 象 。 


voObject {ImagepPickerI05: Object, Timing: Object, MapManager: Object, ImageEditingManager: Object, WebV’ 
pAccessibilityManager: Object 
pActionSheetManager: Object 
pActivityIndicatorViewManager: 0bject 
pAlertManager: Object 
PAppState: Object 
pAsyncLocalStorage: Object 
> CameraRoLUManager: Object 
pContextExecutor: 0bject 
DatepPickerManager: 0bject 
* DevLoadingView: 0bject 

t 


> DeviceExtension: 0bj 
7 D0 UOTect 


> ExceptionsManager: Object 

* HTTPRequestHandter: 0bject 
FImageDownLoader: 0bject 

b ImageEditingManager: 0bject 
> ImageLoader: Object 

> ImagePickerI0S: Object 


图 5-2 ”加 载 模块 


接着 开始 实现 模块 方法 。 添 加 一 个 方法 getDynamicDimensions() 来 返回 当前 的 屏幕 尺寸 ， 并 
且 注 册 一 个 模块 方法 getDynamicDimensions:(RCTResponseSenderBlock)callback 来 返回 我 们 需要 
的 结果 : 


static NSDictionary *DynamicDimensions() { 

// 提 供 当 前 屏幕 的 尺寸 

CGFloat width = MIN(RCTScreenSize().width, RCTScreenSize().height); 

CGFloat height = MAX(RCTScreenSize().width, RCTScreenSize().height); 

CGFloat scale = RCTScreenScale(); 

if (UIDeviceOrientationIsLandscape([UIDevice currentDevice|.orientation)) { 
width = MAX(RCTScreenSize().width, RCTScreenSize().height); 
height = MIN(RCTScreenSize().width, RCTScreenSize().height); 


return @{@"width":@(width), 
@"height":@(height), 
@"scale":@(scale)}; 
} 


RCT_EXPORT_METHOD(getDynamicDimensions: (RCTResponseSenderBlock)callback) { 
callback(@[ [NSNull null], DynamicDimensions()]); 


} 
要 实现 屏幕 方向 的 监听 , 需要 在 模块 初始 化 时 向 消息 中 心 注册 一 个 屏幕 方向 变化 的 系统 事件 
UIDeviceOrientationDidChangeNotification: 
- (instancetype)init 
self = [super init]; 
if (self) { 
[[NSNotificationCenter defaultCenter] addObserver:self 


selector:Q@selector(orientationDidChange:) 
name:UIDeviceOrientationDidChangeNotification object:nil]; 
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return self; 


} 


- (void)dealloc 
{ 


[[NSNotificationCenter defaultCenter] removeObserver:self]; 


} 

所 有 的 Native 模 块 都 在 框架 初始 化 时 创建 一 个 实例 ， 由 React Native 统 一 管理 ， 并 不 存在 多 实 
例 事 件 被 重复 注册 的 问题 。 在 系统 事件 回调 中 ， 通 过 RCTEventDispatcher 将 事件 
orientationDidChange 通 知 到 JavaScript。 这 里 必须 先 要 引入 RCTEventDispatcher 头 文件 ， 否 则 调 
用 时 Xcode 会 报错 : 


@synthesize bridge = bridge; 


- (void)orientationDidChange: (id)noti 
{ 
[_bridge.eventDispatcher sendDeviceEventWithName: 
@"orientationDidChange"” body: 
@{ @"Orientation":UIDeviceOrientationIsLandscape(l 
[UIDevice currentDevice|.orientation) ?@"Landscape":@"Portrait", 
@"Dimensions":DynamicDimensions()}]; 


3 
最 后 将 事件 变量 作为 常量 导出 ， 供 JavaScript 注 册 事 件 时 使 用 : 


- (NSDictionary *)constantsToExport 


{ 

return @{@"EVENT ORIENTATION":@"orientationDidChange"}; 
} 
现在 ， 在 JavaScript 中 调用 我 们 的 模块 来 看 一 下 结果 。 


调用 getDynamicDimensions 方 法 获得 当前 屏幕 的 尺寸 : 


var DeviceExtension = require('NativeModules').DeviceExtension; 


DeviceExtension.getDynamicDimensions((error,dimensions) => { 
console.log(dimensions); 


}); 
//Console Log 

Object {width: 375, scale: 2, height: 667} 
然后 接收 屏幕 旋转 的 事件 : 


var RCTDeviceEventEmitter = require('RCTDeviceEventEmitter'); 


var subscription = 
RCTDeviceEventEmitter.addlListener('orientationDidChange', 
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(dimensions) => { 

//Object {Orientation: "Landscape", Dimensions: Object} 
//Object {Orientation: "Portrait", Dimensions: Object} 
console.log(dimensions); 


]); 

//subscription.remove(); 

这 样 一 个 Native 模 块 就 完成 了 。 不 难 发 现 ，React Native 的 确 提供 了 一 个 非常 便捷 的 方式 来 扩 
展 Native 模 块 。 如 果 要 把 模块 做 成 第 三 方 组 件 的 话 ， 还 有 一 些 工作 要 做 : 首先 以 一 个 静态 库 工程 
来 编译 模块 代码 ， 提 供 JavaScript 的 封装 ， 最 后 创建 Package.json 来 支持 node 的 引用 。 

在 项 目 目录 node modules/react-native-device-extension 下 新 建 一 个 静态 库 项 目 RCTDevice- 
Extension， 并 且 加 入 模块 类 文件 RCTDeviceExtension ， 如 图 $-3 所 示 。 


Choose a template for your new project: 
ioS 2 
Application WS ms 
Framework & Library 
Other Cocoa Touch Cocoa Touch 
Framework Static Library 
OSX 
Application 
Framework & Library 
System Plug-in 
Other 
Cocoa Touch Static Library 
This template builds a static library that links against the Foundation framework. 
Cancel Next 


图 5-3 ”新 建 静 态 库 


然后 在 该 目录 下 新 建 RCTDeviceExtension.ios.js 与 package.json。 


node modules 
|--react-native-device-extension 
|- package.json 
RCTDeviceExtension.ios.js 
RCTDeviceExtension.xcodeproj 
RCTDeviceExtension.h 
RCTDeviceExtension.m 


在 应 用 工程 中 引入 模块 的 静态 库 , 在 Libraries 加 入 静态 库 的 xcodeproj 文 件 , 并 在 Build Phase 一 
Link Binary With Libraries 中 引入 模块 的 静态 库 文件 ， 如 图 5-4 所 示 。 
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™ Linked Frameworks and Libraries 
Aame Status 

By libReact.a Required 
By libRCTActionSheet.a Required 
By libRCTGeolocation.a Required 
By libRCTImage.a Required 
ys libRCTLinking.a Required 
By libRCTNetwork.a Required 
By libRCTSettings.a Required 
By libRCTText.a Required 
By libRCTVibration.a Required 
By libRCTWebSocket.a Required 
十 


图 5-4 引入 静态 库 文件 


这 时 会 发 现 错误 RCTBridgeModule.h' file not found， 这 是 因为 静态 库 需 要 外 部 引用 React 的 基 
础 库 ， 需 要 添加 相关 头 文件 的 路 径 。 此 时 在 项 目 中 Build Settings 一 Search Paths 一 Header Search 


Paths 增 加 $(SRCROOT)/../react-native/React， 并 且 把 模式 修改 为 recursive 即 可 。 需要 说 明 的 是 ， 


里 的 路 径 取 决 于 RCTDeviceExtension.xcodeproj 与 React.xcodeproj 的 相对 路 径 。 


‘» 


这 


然后 对 JavaScript 模 块 进行 封装 。 对 于 JavaScript 人 员 来 说 ， 有 可 能 不 是 很 熟悉 Native 的 代码 ， 


因此 提供 对 应 的 JavaScript 封 装 并 且 辅 以 注释 还 是 很 有 必要 的 : 


//RCTDeviceExtension.ios.js 
"USse strict' 


var RCTDeviceEventEmitter = require('RCTDeviceEventEmitter'); 
var ExtensionModule = require('NativeModules').DeviceExtension; 


var deviceSubscriptions = {}; 


var DeviceExtension = { 

// 事 件 列 表 

events : { 
EVENT_ORIENTATION: ExtensionModule.EVENT ORIENTATION 

)， 

// 获 得 当前 屏幕 大 小 

getDynamicDimensions: function(handler: Function) { 
ExtensionModule.getDynamicDimensions(handler); 

)， 

// 监 听 事 件 

addLisener: function(event: String, handler: Function) { 
if (event == self.events.EVENT ORIENTATION) { 

_ deviceSubscriptions[handler| = RCTDeviceEventEmitter.addListener(event, handler); 

} 

}), 

// 移 除 事 件 监听 

removelLisener: function(event: String, handler: Function) { 
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if (! deviceSubscriptions[handler]) { 
return; 


} 


_ deviceSubscriptions[handler].remove(); 
_ deviceSubscriptions[handler| = null; 


} 


module.exports = DeviceExtension; 
最 后 ， 在 目录 下 添加 package.json 文 件 。package.json 文 件 的 内 容 如 下 : 


//package.json 


"name": "react-native-device-extension", 
"version": "0.1", 
"main": "./RCTDeviceExtension.ios.js" 


} 


然后 我 们 的 模块 就 可 以 与 官方 模块 采用 相同 的 方式 引入 : 


//index.i0s.js 


var DeviceManager = require('react-native-device-extension'); 
var RNDemo = React.createClass({ 


getInitialState: function() { 
returun { 
orientation: ‘unkown" 
}; 
}, 


viewDidOrientation: function(event) { 
this.state.orientation = event.0Orientation; 


}, 


componentDidMount: funcion() { 
DeviceManager.addLisener(DeviceManager.events. 
DEVICE ORIENTATION EVENT, this.viewDidOrientation); 


}, 


componentWillUnmount: function() { 
DeviceManager.removelisener(DeviceManager.events. 
DEVICE ORIENTATION EVENT, this.viewDidOrientation); 


}, 
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5.3 构建 Native UI 组 件 


React Native 提 供 了 许多 基础 组 件 的 封装 ,例如 Navigator .MapView、DatePickerIOS 、ScrollView 


等 。 这 些 基 础 组 件 结合 使 月 


月 React， 也 可 以 构建 出 一 些 复合 组 件 。 当 然 ， 因 为 设计 的 原因 ， 某 些 


包含 大 量子 控件 的 复合 组 件 ( 例如 表格 类 组 件 ) 在 性 能 上 会 有 不 足 。 原 生 组 件 经 过 长 时 间 的 发 展 ， 


已 经 有 了 非常 不 错 的 积累 ， 


许多 优秀 的 UI 组 件 被 开源 出 来 供 大 家 选择 。React Native 也 提供 了 便 


捷 的 方式 ， 将 原生 组 件 抽象 成 ReacUS 中 的 组 件 对 象 来 供 JavaScript 端 调用 。 


5.3.1 概述 


扩展 的 Native UI 组 件 也 是 一 个 Native 模 块 。 相 对 API 组 件 来 说 , UI 组 件 还 需要 被 抽象 出 供 React 


使 用 的 标签 ,提供 标签 属性 ,响应 用 户 行为 等 。 在 React 中 创建 UI 组 件 时 ， 都 会 生成 reactTag 来 作 


为 唯一 标识 。JavaScript UIE 


与 原生 UI 都 将 通过 reactTag 进 行 关 联 。JavaScript UI 的 更 新 会 通过 调用 


RCTUIManager 模 块 的 方法 来 映射 成 原生 UI 的 更 新 。 当 原生 UI 被 通知 改变 时 ， 会 通过 reactTag 来 定 


位 UI 实例 来 进行 更 新 操作 ， 


所 有 的 UI 更 新 操作 并 不 会 马上 执行 ， 而 是 会 被 缓存 在 一 个 UIBlocks 


中 ， 每 次 通信 完毕 ， 再 由 主线 程 统 一 执行 UIBlocks 中 的 更 新 。 在 帧 级 别 的 通信 频率 下 ， 让 原生 UI 
无 颖 地 响应 JavaScript 的 改变 。 


5.3.2 UI 组 件 的 定义 
要 构建 Native UI 组 件 ， 


先 要 创建 UI 的 管理 类 ， 这 个 管理 类 需要 继承 RCTViewManager 类 。 实 质 


上 ，RCTViewManager 类 同样 遵循 RCTBridgeModule 的 协议 。 然 后 再 实现 - (UIView *)view 接 口 ,在 


接口 返回 Native UI 的 实例 : 


#import "RCTViewManager. 


p" 


@interface RCTMapManager : RCTViewManager 


@end 
@implementation RCTMapMa 


RCT_EXPORT MODULE() 


- (UIView *)view 
{ 

return [[MKMapView all 
} 


@end 


nager 


oc] init]; 


需要 注意 的 是 ，UI 组 件 的 样式 都 是 由 JavaScript 来 控制 的 ， 因 此 在 - (UIView *)view 中 实例 化 
时 , 任何 对 于 样式 的 操作 都 会 被 JavaScript 模 块 中 对 应 的 样式 覆盖 。 同 时 值得 注意 的 是 , 在 实例 化 


时 一 般 不 对 View 的 Frame 进 


行 设 置 。 如 果 UI 组 件 内 部 的 UI 或 者 图 层 不 支持 自 适应 ， 则 需要 在 UI 组 
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件 的 - (void)layoutSubviews 方 法 中 对 内 部 控件 实现 自 适 应 布局 。 

沿用 系统 的 命名 规范 ， 扩 展 的 UI 组 件 模 块 都 以 Manager 为 后 级， 在 React 中 使 用 时 只 需要 在 
JavaScript 中 导出 对 应 的 原生 组 件 对 象 即 可 。 组 件 名 需要 过 滤 类 名 后 级 Manager， 所 有 的 组 件 对 象 
导出 后 都 可 以 通过 组 件 标 签 引 用 : 


var { requireNativeComponent } = require('react-native'); 
module.exports = requireNativeComponent('RCTMap' , null); 


// 可 以 在 render 方 法 中 这 样 使 用 <RCMap/> 


5.3.3 UI 组 件 属性 
原生 组 件 的 属性 也 需要 桥接 到 JavaScript， 以 标签 属性 的 形式 访问 。 

一 般 情 况 下 ， 我 们 使 用 RCT_EXPORT_VIEW_PROPERTY 来 桥接 Native UI 的 属性 : 
RCT_EXPORT VIEW PROPERTY(pitchEnabled, BOOL) 


默认 情况 下 ，JavaScript 标 签 属 性 与 Native 属 性 相同 。 如 果 需 要 另外 定义 ， 可 以 使 用 
RCT_REMAP_VIEW_PROPERTY。 


然后 就 可 以 在 JavaScript 中 为 组 件 标 签 设置 属性 了 : 
<RCTMap pitchEnabled={false} /> 


在 RCTViewManager.m 中 可 以 看 到 ，React Native 对 于 一 些 默 认 的 View 属 性 自动 做 了 桥接 
View， 我 们 可 以 直接 使 用 : 


//RCTViewManager.m 


RCT_EXPORT_VIEW PROPERTY(backgroundColor, UIColor) 
RCT_REMAP VIEW PROPERTY(accessible, isAccessibilityElement, BOOL) 


与 模块 方法 相同 ， 属 性 的 类 型 支持 标准 JSON 对 象 。 同 时 ，RCTConverth 中 也 提供 一 些 常 用 
类 型 的 自动 转换 ， 例 如 UIColor 和 NSDate 。 如 果 是 默认 不 支持 的 类 型 属性 ， 可 以 通过 宏 
RCT_CUSTOM_VIEW_PROPERTY(name, type, viewClass) 来 完成 自 定义 类 型 属性 的 扩展 ， 其 中 参数 name 
为 属性 名 ，type 为 属性 的 类 型 ，viewClass 则 是 Native 组 件 的 类 型 。 在 宏 命 令 后 的 方法 实现 中 ,对 
控件 的 对 应 属性 进行 赋值 。 示 例如 下 : 


//RCTMapManager.m 
RCT_CUSTOM VIEW PROPERTY(region, MKCoordinateRegion, RCTMap) 


{ 
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[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : 
defaultView.region animated:YES]; 
} 


我 们 可 以 为 视图 的 属性 类 型 创建 自 定义 的 RCTConvert 扩 展 来 进行 类 型 转换 。 以 下 是 对 
MKCoordinateRegion 类 型 的 RCTConvert 扩 展 : 


@implementation RCTConvert(CoreLocation) 


RCT_CONVERTER(CLLocationDegrees, CLLocationDegrees, doubleValue); 
RCT_CONVERTER(CLLocationDistance, ClLLocationDistance, doubleValue); 


+ (CLLocationCoordinate2D)CLLocationCoordinate2D: (id)json 


{ 


json = [self NSDictionary:json] 
return (CLLocationCoordinate2D) 
[ 
[ 


[self CLLocationDegrees:json 
[self CLLocationDegrees:json 
}; 
} 
@end 


{ 
@"1atitude"]]， 
@"longitude"]] 


@implementation RCTConvert(MapKit) 


+ (MKCoordinateSpan)MKCoordinateSpan: (id)json 
{ 
json = [self NSDictionary:json]; 
return (MKCoordinateSpan){ 
[self CLLocationDegrees:json[@"latitudeDelta"]], 
[self CLLocationDegrees:json[@"longitudeDelta"]] 
}; 
} 


+ (MKCoordinateRegion)MKCoordinateRegion: (id)json 


{ 


return (MKCoordinateRegion){ 
[self CLLocationCoordinate2D:json]，// 转 换 
[self MKCoordinateSpan:json] 


}; 
} 
此 外 ， 我 们 也 可 以 采用 与 API 组 件 相同 的 方式 ， 结 合 常量 导出 与 RCTConvert 扩 展 提 供 枚 举 类 
型 的 支持 : 
Q@implementation RCTConvert(UIAccessibilityTraits) 


RCT_MULTI _ ENUM CONVERTER(UIAccessibilityTraits, (@{ 
Q@"none": @(UIAccessibilityTraitNone), 


@"pageTurn": @(UIAccessibilityTraitCausesPageTurn), 
}), UIAccessibilityTraitNone, unsignedLongLongValue) 


@end 
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//RCTViewManager.m 


RCT_EXPORT VIEW PROPERTY(accessibilityTraits, UIAccessibilityTraits) 


5.3.4 组 件 方法 


Native UI 组 件 同样 支持 模块 方法 ， 其 方法 定义 中 必须 包含 由 JavaScript 传 递 过 来 的 reactTag， 
其 实现 逻辑 需要 封装 在 RCTUIManager 的 addUIBlock 接 口 的 块 函数 中 执行 。 这 样 ， 在 块 函 数 中 ， 我 
们 可 以 使 用 RCTUIManager 维 护 的 ViewRegistry 通 过 reactTag 获 得 调用 方法 的 组 件 实例 : 


RCT_EXPORT_ METHOD(reload: (NSNumber *)reactTag) { 
[self.bridge.uiManager addUIBlock:^( unused RCTUIManager *uiManager, RCTSparseArray *viewRegistry) 


: id view = viewRegistry[reactTag]; 
// 完 成 对 控件 重 载 方法 的 调用 
. }]; 
在 JavaScript 中 ， 需 要 为 组 件 设置 引用 ref， 调 用 方法 时 通过 引用 React.findNodeHandle(ref) 
来 获得 组 件 的 reactTag， 然 后 将 其 作为 组 件 模块 方法 对 应 的 参数 传人 : 5 
Var RCT UI REF = ...; 
<RCTCustomUI 


ref={RCT_UI REF} 
/> 


// 方 法 调用 

RCTCustomUIManager .reload( 
React.findNodeHandle(this.refs[RCT UI REF]) 
); 


5.3.5 事件 


大 多 数控 件 都 会 接受 用 户 的 行为 ， 例 如 TextField 需 要 接受 用 户 输入 文本 和 点 击 按 钮 的 行为 ， 
图 表 控 件 会 接受 用 户 的 手势 等 ， 这 时 我 们 需要 控件 能 够 针对 用 户 的 行为 作出 响应 。 在 纯 Native 的 
码 中 ， 这 很 容易 做 到 。 例 如 为 控件 增加 UIControlEvent 的 监听 ， 实 现 对 应 的 Delegate 方 法 等 。 
但 是 在 React Native 框 架 中 ， 我 们 还 需要 把 这 个 事件 通知 到 JavaScript， 最 后 由 JavaScript 端 来 完成 
事件 的 响应 ， 具 体 步 又 如 下 所 示 。 


首先 ， 设 置 事件 啊 应 函数 : 


- (void)init { 
[control addTarget:self action:@selector(controlValueChanged:) 
forControlEvents:UIControlEventValueChanged]; 
} 


潍 
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- (void)controlValueChanged: (id)sender { 
// 处 理 控件 的 事件 


然后 设置 Delegate 回 调 函 数 : 
- (void)tableView: (UITableView *)tableView didSselectRowAtIndexPath:(NSIndexPath *)indexPath 


// 处 理 Table 点 击 事件 


在 React Native 中 ， 还 要 在 原生 控件 响应 用 户 事件 的 地 方 ， 通 过 事件 派发 器 RCTEvent- 
Dispatcher 的 sendInputEventNithName 方 法 来 将 事件 发 送 给 JavaScript 模 块 。 在 React Native 中 ， 
件 名 在 Native 模 块 中 会 进行 格式 化 处 理 ， 例 如 在 Native 端 ，change、onChange 和 TopChange 都 会 格 
式 化 为 topChange 事 件 ， 而 JavaScript 都 会 以 onChange 事 件 属 性 来 啊 应 : 

- (void)controlValueChanged: (id)sender { 

NSDictionary *event = @{ 
@"target": sender.reactTag, 
@"value": @(sender.value), 


}; 
[self.bridge.eventDispatcher sendInputEventWithName:@"topChange" body:event]; 


hl 
3 


最 后 ， 由 JavaScript 组 件 响 应 函数 处 理 : 


<RCTCustomUI 
onChange={changeHandler} 


/> 
在 RCTViewManager 中 ， 默 认定 义 了 一 些 事件 ， 这 些 事 件 会 自动 与 JavaScript 标 签 中 的 
onEventName 属 性 进行 绑 定 ， 具 体 如 下 : 


DD press 


口 change 

口 focus 

口 blur 

DD submitEditing 
DD endEditing 

口 touchStart 

口 touchMove 

口 touchCancel 
口 touchEnd 


如 果 需 要 绑 定 自 定义 事件 ， 可 以 通过 在 Manager 模 块 类 中 重 写 - (NSArray *)customBubbling- 
EventTypes 接 口 来 实现 : 


图 灵 社 区 会 员 蚂 蜂 (240671488@qq.com) 专 享 尊重 版 权 


5.3 构建 Native UI 组 件 二 201 


- (NSArray *)customBubblingEventTypes 


return @[ 
@"downloadComplete" 


] ; 
} 


此 时 在 标签 中 就 可 以 使 用 标签 属性 调用 响应 函数 了 : 


<RCTCustomUI 
onDownloadComplete ={downloadHandler} 


/> 

发 送 事 件 时 ， 也 会 将 一 些 数据 通过 sendInputEventWithName:body: 接 口 的 body 参 数 传递 给 
JavaScript, 此 时 数据 需要 封装 为 一 个 字典 类 型 , 必须 包含 target 字 段 来 存放 reactTag , 让 JavaScript 
能 够 通知 到 对 应 的 组 件 来 执行 响应 函数 。 在 JavaScript 中 ， 可 以 通过 响应 函数 的 参数 pody. 
nativeEvent 直 接 访问 字典 中 的 数据 : 


var changeHandler = function(body) { 
console.log(body.nativeEvent.userData); 


5.3.6 ”实例 


在 这 一 节 中 ， 我 们 为 大 家 演示 如 何 将 一 个 原生 组 件 扩展 为 React Native 的 UI 组 件 。 这 里 使 用 
一 个 开源 的 PieChart 组 件 ， 它 在 GitHub 上 的 代码 仓库 地 址 为 https://github.com/xyfeng/XYPieChart。 


这 里 我 们 直接 以 node 模 块 的 形式 来 创建 UI 组 件 扩展 ， 具 体 步 骤 如 下 。 


(1) 在 node_modules/react-native-xypiechart 下 新 建 模 块 目录 。 

(2) 创建 静态 库 工程 XYPieChart， 并 且 引 入 开源 组 件 XYPieChart 类 ， 同 时 创建 XYPieChart- 
Manager 模 块 管理 类 ，。 

(3) 添加 PieChart,iosjs 和 package.json 文 件 。 

(4) 为 应 用 工程 引入 扩展 静态 库 libXYPieChart.a。 

相对 API 组 件 来 说 , UI 组 件 更 加 复杂 ,因为 其 中 包含 了 许多 自 定义 的 属性 和 方法 。 一 般 来 说 ， 
组 件 都 会 使 用 JavaScript 通 过 React 进 行 封装 ， 并 添加 适当 的 注释 来 提高 可 读 性 。 


node 模 块 的 目录 结构 如 下 : 


node modules 

|--react-native-xypiechart 
|- package.json 

- PieChart.ios.js 

- XYPieChart.h 

- XYPieChart.m 

- XYPieChart.xcodeproj 

- XYPieChartManager.m 

- XYPieChartManager.m 
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首先 ，XYPieChartManager 需 要 继承 RCTViewManager 类 ， 同 时 实现 中 需要 导出 UI 模块 ,并且 实 
现 - (UIView *)view 来 返回 UI 的 实例 : 


//XYPieChartManager.h 
@interface XYPieChartManager : RCTViewManager 


@end 
//XYPieChartManager.m 


@implementation XYPieChartManager 
RCT_EXPORT MODULE() 


- (UIView *)view 

中 
XYPieChart *pieChart = [[XYPieChart alloc] init]; 
pieChart.delegate = self; 
return pieChart; 


} 

@end 

接着 在 PieChart.ios.js 中 直接 导出 XYPieChart 组 件 ， 将 在 后 续 章 节 中 完成 ReactJS 的 封装 : 
//PieChart.ios.js 


var { requireNativeComponent, } = require('react-native'); 
var XYPieChart = requireNativeComponent('XYPieChart', null); 


module.exports = XYPieChart; 
然后 直接 使 用 组 件 标签 来 构建 视图 : 


//index.ios.js 


var PieChart = require('react-native-xypiechart'); 
var RNDemo = React.createClass({ 


render: function() { 
return ( 
<View style={styles.container}> 
<PieChart style={styles.chart} /> 
</View> 


}); 
var styles = StyleSheet.create({ 
chart: { 
width:200, 


height:200, 
borderWidth:1 


} 
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运行 上 述 代码 ， 可 以 看 到 组 件 已 经 被 演 染 到 屏幕 中 了 ， 如 图 5-5 所 示 。 


iPhone 6s - iPhone 6s / iOS 9.0 (13A340) 


图 5-5 ”演示 效果 


接着 为 组 件 扩展 标签 属性 ， 这 可 以 根据 原生 控件 的 属性 选择 性 添加 : 


//XYPieChart.h 


@property(nonatomic, 
@property(nonatomic, 


@property(nonatomic, 
@property(nonatomic, 
@property(nonatomic, 


weak) id<XYPieChartDataSource> dataSource; 
weak) id<XYPieChartDelegate> delegate; 


strong) UIFont *]labelFont; // 饼 图 显示 标签 字体 
strong) UIColor *labelColor; // 饼 图 显示 标签 字体 颜色 
assign) BOOL showPercentagej;j // 显 示 百 分 比 还 是 原 值 


可 以 看 出 ， 控 件 需要 通过 DataSource 代 理 来 为 Chart 设 置 数据 。 如 果 将 Manager 类 设置 为 数据 
源 实现 DataSource 方 法 ， 


随 之 而 来 的 问题 是 ， 并 没有 特别 好 的 方案 在 视图 释放 时 手动 释放 缓存 


数据 。 这 里 推荐 一 个 简洁 的 办 法 ， 通 过 扩展 为 控件 封装 一 个 Data 属 性 ， 由 控件 自身 来 实现 数据 


源 实现 : 


图 灵 社 区 会 员 蚂 蜂 (240671488@qq.com) 专 享 尊重 版 权 


204 区 第 5 章 Native 扩展 


Qinterface XYPieChart (ReactCategory)<XYPieChartDataSource> 


//{'label':'',value:'',color:''} 
@property (nonatomic, strong) NSArray *chartData; 
@end 


Qimplementation XYPieChart (ReactCategory) 
- (NSArray *)chartData 


return (NSArray *)objc getAssociatedObject(self, @selector(chartData)); 
} 


- (void)setChartData: (NSArray *)chartData 


{ 
objc_setAssociatedObject(self, @selector(chartData), chartData, 
OBJC ASSOCIATION RETAIN NONATOMIC); 
[self reloadData]; 


} 


- (NSUInteger)numberOfSlicesInpieChart: (XYPieChart *)pieChart 
{ 


return [self.chartData count]; 
} 
- (CGFloat)pieChart: (XYPieChart *)pieChart valueForSliceAtIndex: (NSUInteger)index 
{ 
return [self.chartData[lindex][@"value"] intValue]; 
} 
- (UIColor *)pieChart: (XYPieChart *)pieChart colorForSliceAtIindex: (NSUInteger)index 


return [RCTConvert UIColor:self.chartData[index][@"color"]]; 


下 
- (NSString *)pieChart: (XYPieChart *)pieChart textForSliceAtIindex: (NSUInteger)index 


return self.chartData[lindex][@"label"]; 


} 

@end 

这 样 我 们 只 需要 为 控件 扩展 chartData 属 性 ， 设 置 数据 显示 : 
//XYPieChartManager.m 


RCT_EXPORT_VIEW PROPERTY(chartData, NSArray) 
RCT_EXPORT_VIEW PROPERTY(showPercentage, BOOL) 
RCT_EXPORT_VIEW PROPERTY(labelFont, UIFont) 


RCT_EXPORT VIEW PROPERTY(labelColor, UIColor) 
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//index.i0s.js 


<PieChart style={styles.chart} 
chartData={chartData} 
showPercentage={false} /> 


现在 来 看 一 下 控件 效果 ， 如 图 5-6 所 示 。 


iPhone 6s - iPhone 6s / iOS 9.0 (13A340) 
Carrier 全 6:23PM ms 


图 5-6 ”控件 效果 

可 以 看 到 ， 饼 图 并 没有 如 期 望 的 那样 展现 。 查 看 XYPieChart 的 源 代码 ， 可 以 发 现 控 件 并 不 支 
持 自 适应 。 在 初始 化 时 ， 所 有 的 图 形 图 层 都 根据 当时 的 尺寸 创建 完毕 了 。 因 此 , 我 们 必须 对 此 进 
行 修改 ， 以 便 在 布局 时 UI 的 大 小 发 生变 化 后 重 绘 图 形 ， 这 样 就 可 以 通过 JavaScript 的 样式 来 操控 
扩展 的 UI 组 件 了 : 


- (void)layoutSubviews 


[super layoutSubviews]; 
if (!CGRectEqualToRect(self.bounds, pieView.bounds)) { 
[self initpieView]; 
[self reloadData] ; 
} 
. 


- (void)initPieView 
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// 重 建 图 层 


运行 示例 ， 可 以 看 到 饼 图 已 经 正常 显示 在 屏幕 中 了 ， 如 图 $-7 所 示 。 
接着 尝试 修改 一 下 标签 属性 showPercentage={true}, 此 时 再 运行 代码 , 发现 饼 图 中 的 文字 换 
成 了 百分比 显示 ， 如 图 5-8 所 示 。 


iPhone 6s - iPhone 6s / iOS 9.0 (13A340) iPhone 6s - iPhone 6s / iOS 9.0 (13A340) 
Carrier 本 6:40 PM Lo Carrier 令 6:43 PM mw 


图 5-7 饼 图 图 5-8 ”修改 标签 属性 后 的 饼 图 


我 们 希望 饼 图 中 某 一 部 分 被 点 击 的 时 候 可 以 通知 JavaScript 来 处 理 相 关 的 响应 。 先 在 
XYPieChartManager 中 实现 饼 图 被 选中 的 代理 方法 pieChart:didSelectSliceAtIndex:, 在 代理 方法 
中 通过 事件 派发 需 来 问 JavaScript 应 发 送 用 户 输入 事件 change, 并 将 选中 人 饼 图 的 数据 包装 成 一 个 字 
典 对 象 通过 body 参 数 传递 ， 字 典 对 象 中 必须 定义 target 的 键 值 来 存储 组 件 的 reactTag， 和 否则 运行 
时 将 会 出 错 , 无 法 通知 到 JavaScript 中 的 组 件 对 象 。 在 JavaScript 中 , 可 以 通过 使 用 onChange 标 签 来 
设置 响应 函数 来 处 理 点 击 事件 : 


//XYPieChartManager.m 
- (void)pieChart: (XYPieChart *)pieChart didSelectSliceAtIndex: (NSUInteger)index 


NSDictionary *event = @{ 
@"target": [pieChart reactTag], 
@"data" : pieChart.chartData[index] 


[self.bridge.eventDispatcher sendInputEventWithName:@"change" body:event]; 


//index.ios.js 
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selectHandler: function(body) { 
//body.NativeEvent.data 


} 

<pieChart onChange={ (this.selectHandler)} ... /> 

当 点 击 图 表 中 某 一 块 时 ，JavaScript 中 定义 的 selectHandler 就 会 被 执行 ， 在 函数 中 可 以 将 被 
选中 区 块 的 数据 展示 出 来 或 者 做 一 些 其 他 操作 。 

最 后 ， 我 们 还 需要 将 其 封装 成 第 三 方 组 件 ， 具 体操 作 与 API 组 件 一 样 ， 这 里 就 不 重复 了 。 

React Native 提 供 了 非常 便捷 的 扩展 方法 来 将 原生 组 件 抽 象 到 JavaScript 中 使 用 ， 这 对 于 框架 
本 身 的 发 展 非常 有 利 。 目 前 ， 国 外 已 经 有 一 部 分 应 用 尝试 使 用 React Native， 详 见 http://facebook. 
github.io/react-native/showcase.html。 我 们 相信 ， 很 快 就 会 有 更 多 的 React Native 应 用 进入 大 家 的 
视线 。 
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第 O 章 
组 件 封装 


在 第 3 章 和 第 4 章 中 ， 我 们 分 别 学 习 了 React Native 的 常用 组 件 和 API。 我 们 也 希望 将 业务 拆 分 
成 组 件 , 这 样 有 利于 团队 合作 和 代码 的 后 期 维护 。 其 实 ,第 3 章 涉 及 了 业务 组 件 的 封装 ,第 5 章 涉 
及 了 Native 组 件 的 扩展 和 封装 ， 这 一 章 我 们 将 系统 介绍 一 些 业 务 组 件 的 封装 。 一 款 App 由 很 多 组 
件 组 成 ,因此 ,合理 地 分 解 App 的 功能 需要 大 量 的 实践 和 探索 。 合理 地 划分 组 件 将 会 极 大 地 推动 
团队 合作 ,减少 开发 成 本 。 


6.1 二 级 菜单 组 件 


开发 组 件 的 好 处 有 很 多 , 最 为 明显 的 是 复 用 和 独立 功能 模块 。 在 搜索 功能 模块 中 , 经 常会 遇 
到 二 级 菜单 , 尤其 是 在 LBS 相 关 的 应 用 中 。 图 6-1 是 我 们 常常 需要 的 功能 需求 , 这 个 需求 就 是 二 级 


菜单 。 


@ 全 部 区 域 加 地 铁 沿线 

全 部 区 域 静安 区 
热门 商 圈 徐汇 区 
热门 行政 区 长 宁 区 

黄浦 区 

虹口 

闸北 区 

图 6-1 二 级 菜单 


在 这 一 他 中 ， 我 们 就 是 要 一 步 步 实 现 该 组 件 。 
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6.1.1 静态 组 件 的 实现 


开发 组 件 之 前 , 我 们 需要 将 一 个 大 组 件 划分 成 颗粒 度 适 中 的 组 件 。 这 里 我 们 以 二 
进行 介绍 。 该 组 件 复杂 的 地 方 主要 在 于 需要 切换 不 同 视图 ， 以 期 出 现 菜 单 联动 效果 。 


动态 组 件 是 指 可 以 从 外 部 传人 数据 和 属性 的 组 件 , 可 以 复 用 。 静态 组 件 是 不 具有 重用 特 
组 件 ， 由 静态 数据 组 成 。 静态 组 件 的 实现 相对 来 说 比较 简单 ， 只 要 开发 页 面 即 可 ， 
数据 的 传递 ， 具 体 的 代码 如 下 : 


var React = 
var { 
AppRegistry, 
StyleSheet, 
Text， 
View, 
ScrollView, 
} = React; 


级 菜单 为 例 


征 的 
不 要 考虑 属性 


require('react-native'); 


var MenuList = 
getInitialState: 
return { 

wholeArea: false, 
hotBusiness: true, 
hotDistrict: false, 
wholeAreaFFF:{}, 
hotBusinessFFF:{backgroundColor: '#fff'}, 
hotDistrictFFF:{} 


React.createClass({ 
function(){ 


}; 

}, 

render: function(){ 
return ( 


<View style={styles.container}> 
<View style={[styles.row, styles.header]}> 
<View style={[styles.flex 1, styles.center]}> 
<Text style={[styles.header text, styles.active blue]}> 全 部 区 域 </Text> 
</View> 
<View style={[styles.flex 1, styles.center]}> 
<Text style={[styles.header text]}> 地 铁 沿线 </Text> 
</View> 
</View> 
<View style={[styles.row, styles.flex 1]}> 
<ScrollView style={[styles.flex 1, styles.left pannel]}> 
<Text onpress={this.wholeArea} style={[styles.left row, 
this.state.wholeAreaFFF]}> 全 部 区 域 </Text> 


<Text 
thi 
<Text 
thi 
</Scro 


{ 
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this.state.wholeArea ? 
<ScrollView style={[styles.flex 1, styles.right pannel]}> 
<Text style={styles.left _row}> 全 部 区 域 </Text> 
</ScrollView> 
: Null 
上 
{ 
this.state.hotBusiness ? 
<ScrollView style={[styles.flex 1, styles.right pannel]}> 
<Text onpress={this.} style={styles.left row}> 虹 桥 地 区 </Text> 
<Text style={styles.left_row}> 徐 家 汇 地 区 </Text> 
<Text style={styles.left _row}> 淮 海路 商业 区 </Text> 
<Text style={styles.left row}> 静 安 寺 地 区 </Text> 
<Text style={styles.left row}> 上 海 火车 站 地 区 </Text> 
<Text style={styles.left row}> 浦 东 陆 家 嘴 金 融 贸 易 区 </Text> 
<Text style={styles.left row}> 四 川北 路 商业 区 </Text> 
<Text style={styles.left row}> 人 民 广 场地 区 </Text> 
<Text style={styles.left Tow}> 南 翔 、 安 亭 汽 车 城 </Text> 
</ScrollView> 
: null 
} 
{ 
this.state.hotDistrict ? 
<ScrollView style={[styles.flex 1, styles.right pannel]}> 


<Text style={styles.left row}> 静 安 区 </Text 
<Text style={styles.left row}> 徐 汇 区 </Text 
<Text style={styles.left row}> 长 宁 区 </Text 
<Text style={styles.left row}> 黄 浦 区 </Text 
<Text style={styles.left row}> 虹 口 区 </Text 
<Text style={styles.left row}> 宝 山区 </Text 
<Text style={styles.left row}> 疗 北 区 </Text 


YY YY YY 


</ScrollView> 


: nul 


} 


</View> 
</View> 


wholeArea: func 
this.setState 
wholeArea: 


hotBusiness: 
hotDistrict: 


wholeAreaFF 
hotBusiness 
hotDistrict 
3 
入 


1 


tion(){ 
{ 
true, 

false, 

false, 
F:{backgroundColor: '#fff"}, 
FE 

FFF:{} 
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hotBusiness: function(){ 
this.setState({ 
wholeArea: false, 
hotBusiness: true, 
hotDistrict: false, 
wholeAreaFFF:{}, 
hotBusinessFFF:{backgroundColor: '#fff'}, 
hotDistrictFFF:{} 
]); 
}, 


hotDistrict: function(){ 
this.setState({ 
wholeArea: false, 
hotBusiness: false, 
hotDistrict: true, 
wholeAreaFFF:{}, 
hotBusinessFFF:{}, 
hotDistrictFFF:{backgroundColor: '#fff'} 
]); 
} 
]); 


var styles = StyleSheet.create({ 
container:{ 
height:240, 
flex:1， 
borderTopWidth:1, 
borderBottomWidth:1, 
borderColor: '#ddd" 


1 1 


flexDirection: 'row 


header:{ 
height:35, 
borderBottomWidth:1, 
borderColor: '#DFDFDF', 
backgroundColor: '#F5F5F5" 

} 

header text:{ 
color: '#7B7B7B', 
fontSize:15 

} 

center:{ 
justifyContent:'center', 
alignItems:'center’' 

} 

left pannel:{ 
backgroundColor: '#F2F2F2 ， 


}, 
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left row:{ 
height:30, 
lineHeight:20, 
fontSize:14, 
color: '#7C7C7C', 


了 

right pannel:{ 
marginLeft:10 

外 

active blue:{ 
color: '#00B7EB' 


外 
active fff: 
backgroun 

} 

)); 


var App = Rea 

render: fun 
return ( 
<View s 

<Menu 

</View> 


3 
}); 


AppRegistry.r 


{ 
dColor: '#fff" 


ct.createClass({ 
ction(){ 


tyle={{marginTop:25}}> 
List/> 


egisterComponent('APP', () => App); 


在 上 述 代 码 中 ,我们 首先 需要 规划 单 击 一 级 菜单 的 state。 这 里 我 们 使 用 的 是 一 个 比较 简单 
的 例子 ， 数 据 是 图 6-1 所 示 的 数据 。wholeArea 表 示 “ 全 部 区 域 "，hotBusiness 表 示 “ 热 门 商 圈 ”， 


hotDistrict 表 示 


“热门 行政 区 ”， 如 果 它 们 为 true， 则 显示 对 应 的 视图 ( 即 二 级 菜单 )。 这 里 , 我 


们 在 点 击 时 会 控制 只 显示 一 个 二 级 视图 : 


getInitialState: function(){ 


return { 


wholeArea: 


hotBusine 

hotDistri 

wholeArea 

hotBusine 

hotDistri 
二 


false, 

ss: true, 

ct: false, 

FFF:{}, 
ssFFF:{backgroundColor: '#fff"}, 
ctFFF:{} 


其 中 wholeAreaFFF、hotBusinessFFF 和 hotDistrictFFF 表 示 对 应 的 “全 部 区 域 "、“ 热 门 商 圈 ”、“ 热 


门 行政 区 ”是 否 为 白色 。 如 果 是 白色 ， 则 为 {backgroundColor: '#fff'}， 如 果 不 显示 背景 颜色 ， 


则 为 们 。 


运行 上 面 的 代码 ,发 现 基本 的 静态 效果 已 经 完成 。 但是， 如 果 这 样 就 算 完成 的 话 , 组 件 的 数 
据 模型 和 视图 就 没有 分 离 ， 组 件 也 无 法 重用 。 我 们 到 这 里 充其量 只 是 做 了 一 个 “页 面 ” 而 已 ,而 
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不 是 完成 一 个 组 件 。 因 此 , 我 们 需要 将 静态 组 件 改 为 动态 组 件 。 开 发 者 可 以 通过 传人 不 同 的 数据 
模型 来 泻 染 组 件 。 


WW 


6.1.2 ”实现 组 件 的 复 用 和 封装 


开发 一 个 登录 系统 ， 需 要 提前 规划 很 多 问题 ， 比 如 : 第 三 方 url 登 录 跳 转 、cookie 和 session 的 
维护 、 统 一 鉴 权 和 认证 等 。 同 样 ， 开 发 一 个 组 件 时 ， 也 是 需要 规划 的 。 在 6.1.1 节 中 ， 我们 实现 了 
二 级 菜单 组 件 的 静态 视图 ， 这 一 节 需 要 修改 代码 ， 从 而 实现 组 件 的 复 用 。 我 们 从 以 下 4 个 方面 来 
规划 二 级 菜单 组 件 。 

1. 数据 模型 


既然 要 实现 组 件 的 复 用 ， 就 需要 将 每 一 项 的 数据 传递 到 组 件 中 。 这 时 数据 模型 ( model ) 就 
十 分 重要 , 一 个 好 的 模型 就 是 一 个 好 的 数据 结构 ， 从 某 种 意义 上 说 是 一 个 好 的 算法 。 只 有 数据 模 
型 设计 合理 了 , 后 面 的 模型 在 组 件 内 的 维护 才 更 方便 。 二 级 菜单 的 模型 是 这 样 的 : 点 击 某 一 个 Tab 
选项 卡 ， 展示 该 Tab 视 图 的 一 级 菜单 项 ， 点 击 某 一 级 菜单 项 即 可 展示 二 级 菜单 。 通过 上 面 的 描述 ， 
我 们 大 概 知 道 了 该 组 件 需 要 的 树 形 结构 模型 ， 如 图 6-2 所 示 。 


二 级 菜单 
淮海 路 商业 区 ) { 静安 寺 地 区 


图 6-2” 树 形 结构 
下 面 我 们 构建 一 个 简单 的 数据 模型 ， 代 码 如 下 所 示 : 


var data = { 


"虹桥 地 区 "， 
"徐家汇 地 区 "， 
"淮海 路 商业 区 "， 
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"静安 寺 地 区 "， 

"上 海 火 车 站 地 区 "， 
"浦东 陆家嘴 金融 贸易 区 "， 
"四 川北 路 商业 区 "， 

"人 民 广 场地 区 "， 

" 南 翔 、 安 训 汽 车 城 " 


用 

"热门 行政 区 ": [ 
"静安 区 "， 
"徐汇 区 "， 
"黄浦 区 "， 
"虹口 区 ”， 
"宝山 区 "， 

"闸北 区 " 


"地 铁 全 线 ": [" 地 铁 全 线 "]， 
"一 号 线 ": [" 芋 庄 站 ",，" 外 环 路 站 "， "莲花 路 站 "，" 锦 江 乐 园 站 ",，" 上 海南 站 "，" 漕 宝 路 站 "]， 
"二 号 线 ": [ "浦东 国际 机 场 站 "， "海天 三 路 站 "， "远东 大 道 站 "， "凌空 路 站 "] 


} 
}; 
此 时 我 们 已 经 构建 好 设 定 的 数据 模型 ， 下 一 步 就 需要 设计 组 件 的 属性 接口 了 。 
2. 属性 接口 


我 们 和 希望 组 件 可 以 通过 传人 参数 泻 染 不 同 的 视图 ， 这 里 希望 可 以 按照 如 下 接口 形式 使 用 该 
组 件 : 

var App = React.createClass({ 

render: function(){ 
return ( 
<View style={{marginTop:25}}> 
<MenuList data={data} nSelected={1} tabSelected={0} click={this.onPress}/> 

</View> 
); 
外 


onPress: function(val){ 
alert(val); 


})); 

MenuList 是 二 级 菜单 组 件 , data 属 性 用 于 传递 数据 模型 ,tabSelected 表 示 哪 一 个 选项 卡 ( Tab ) 
会 被 选中 ，nselected 表 示 选 中 菜单 中 的 哪 一 个 子 项 被 选中 。click 表 示 二 级 菜单 项 被 点 击 时 触发 
的 函数 。 目 前 ， 我 们 希望 该 组 件 的 接口 越 简 单 越 好 。 因 此 ， 只 暴露 这 4 个 属性 。 

3. 设计 泻 染 规则 

在 React Native 中 ， 通 过 改变 state 来 触发 视图 的 刷新 。 因 此 ， 我 们 需要 设计 刷新 规则 ， 这 里 
我 们 希望 将 model 的 一 个 子 树 作 为 视图 来 刷新 。 具 体 的 state 设 计 如 下 : 
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// 设 定 内 置 的 属性 
// 选 中 项 ， 例 如 : _type 0 2 表示 第 一 个 Tab 选 中 并 且 第 二 个 Tab 中 的 第 三 项 选中 
var prefixType = '" type_'; 
// 选 中 项 样式 ， 例 如 : _style 0 2 表示 第 一 个 Tab 选 中 并 且 第 二 个 Tab 中 的 第 三 项 选中 时 的 样式 
var prefixStyle = ' style '; 
// 上 默认 情况 下 左 侧 选中 的 背景 颜色 
var defaultBackgroundColor = {backgroundColor:'#fff"}; 
//getInitialstate 
getInitialState: function(){ 
var data = this.props.data; 
// 左 侧 选 择 的 ijndex 
var nSelected = this.props.nSelected; 
// 头 部 选择 的 index 
var tabSelected = this.props.tabSelected; 
var obj = {}; 
var kIndex = 0; 
for(var k in data){ 
var childData = data[k]; 
var cIndex = 0; 
for(var c in childData){ 
var type = prefixType + k +" "+c; 
var style = prefixStyle + k + ' "+ 人 Cc; 
obj[type] = false; 
obj[style] = {}; 
// 设 定 默认 选中 项 
if(nSelected === CIndex 8& tabSelected === kIndex){ 
obj[type] = true; 
obj[style] = defaultBackgroundColor; 
} 
cIndex++; 
} 
kIndex++; 
} 
obj.tabSelected = tabSelected; 
obj.nSelected = nSelected; 
return obj; 


} 

在 上 面 的 代码 中 , 以 _type 为 前 缀 的 状态 表示 一 级 菜单 的 某 一 项 。 例如 _type_0_1 表 示 第 一 个 
Tab 选 项 卡 对 应 的 视图 一 级 菜单 的 第 2 项 。 如 果 其 值 为 true， pa 否则 没有 选中 。 以 
_style 表示 该 项 的 样式 , 如 果 被 选中 , 则 其 背景 颜色 为 白色 。 我 们 同时 将 tabselected 和 nsSelected 
作为 状态 更 新 ， 修 改 type tabSselected nSelected 和 _ style tabSelected nselected。 这 样 的 话 ， 
我 们 就 可 以 根据 点 击 事 件 刷新 视图 。 


4. 分 解 泻 染 

分 解 该 组 件 , 将 它 分 成 3 部 分 : 头 部 Tab 切 换 栏 左 侧 一 级 菜单 、 右 侧 二 级 菜单 ,我 们 希望 render 
里 面 按照 这 3 部 分 泻 染 ， 具 体 代 码 如 下 : 

render: function(){ 


var header = this.renderHeader(); 
var left = this.renderLeft(); 
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var right = this.renderRight(); 
return ( 
<View style={styles.container}> 
<View style={[styles.row, styles.header]}> 
{header} 
</View> 
<View style={[styles.row, styles.flex 1]}> 


<ScrollView style={[styles.flex 1, styles.left pannel]}> 


{left} 
</ScrollView> 


<ScrollView style={[styles.flex 1, styles.right pannel]}> 


{right} 
</ScrollView> 
</View> 
</View> 
和 
}s 


这 里 我 们 使 用 了 renderHeader 、ifenderLeft 和 TenderRight 这 3 个 函数 来 


做 的 话 ， 我 们 对 视图 的 控制 能 力 更 强 。 
renderHeader 方 法 的 实现 如 下 : 


// 洽 当头 部 TabBar 
renderHeader: function(){ 

var data = this.props.data; 

var tabSelected = this.state.tabSelected; 

var header = []; 

var tabIndex = 0; 

for(var i in data){ 
var tabStyle = null; 
if(tabIndex === tabSelected){ 
tabstyle=[styles.header text, styles.active bluel]; 
}else{ 
tabstyle = [styles.header text]; 
} 
header.push( 
<TouchableOpacity style={[styles.flex 1, styles.center]} 

onpress={this.headerpress.bind(this, i)}> 
<Text style={tabStyle}>{i}</Text> 

</TouchableOpacity> 
); 
tabIndex ++; 

} 

return header; 


;3 
renderLeft 的 实现 如 下 : 


// 泻 染 左 侧 

renderLeft: function(){ 
var data = this.props.data; 
var tabSelected = this.state.tabSelected; 
var leftPannel = []; 
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var index = 0; 
for(var i in data){ 
if(index === tabSelected){ 
for(var k in data[i]){ 
var style = this.state[prefixstyle + i + ' " + k]; 
leftPannel.push( 
<Text onpress={this.leftPress.bind(this, i, k)} 
style={[styles.left row, style]}> {k}</Text>); 


break; 


} 


index ++; 


return leftPannel; 


}, 
renderRight 的 实现 如 下 : 


// 泻 染 右 边 ， 二 级 菜单 
renderRight: function(){ 
var data = this.props.data; 
var tabSelected = this.state.tabSelected; 
var nSelected = this.state.nSelected; 
var index = 0; 
var rightPannel = []; 
for(var i in data){ 
if(tabSelected === index ){ 
for(var k in data[i]){ 
if(this.state[prefixType + i + " 
for(var j in data[ij[k]){ 
rightPannel .push( 
<Text onpress={this.props.click.bind(this, data[li][k][j])} 
style={styles.left row}>{data[i][k][j]}</Text>); 


" + k])t{ 


break; 


} 
} 
} 


index ++; 


return rightPannel; 


及 
5. 绑 定 事件 


我 们 需要 在 3 个 地 方 绑 定 : Tab 切 换 的 事件 、 一 级 菜单 点 击 的 事件 、 
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二 级 菜单 点 击 的 事件 。 


Tab 切 换 需要 做 两 件 事 : 更 新 演 染 子 视图 和 默认 选中 一 级 菜单 的 第 一 项 。 首 先 给 出 头 部 点 击 


事件 的 代码 ， 具 体 如 下 : 


// 头 部 点 击 事件 ， 即 Tab 切 换 事 件 

headerpress: function(title){ 
var data = this.props.data; 
var index = 0; 
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for(var i in data){ 

if(i === title){ 

this.setState({ 
tabSelected: index， 


for(var k in data[i]){ 
if(n !== 0){ 
obj[prefixType + i + ' "+k] 
obj[prefixSstyle + i + " "+ kK] = {Q}; 
}else{ 


obj[prefixType + i + ' "+ k] = true; 
obj[prefixStyle + i + ' " + k] = defaultBackgroundColor; 
} 
n ++; 
} 
this.setState(obj); 
} 
index ++; 


} 
} 


然后 完成 一 级 菜单 的 点 击 事件 ， 具 体 代 码 如 下 : 


// 点 击 左 侧 ， 展 示 右 侧 二 级 菜单 
leftPpress: function(tabIndex, nIndex){ 
var obj = {}; 
for(var k in this.state){ 
// 将 prefixType 或 者 prefixStyle 类 型 全 部 置 为 false 
if(k.indexof(prefixType) > -1){ 
var obj = {}; 
obj[k] = false; 
this. setStat 


} 
if(k.indexOf 
var obj = 
obj[k] = 0); 
this.setState(obj); 
} 
} 
obj[prefixType + tabIndex + 
obj[prefixStyle + tabIndex + 
this.setState(obj); 
外 


二 级 菜单 的 点 击 事件 由 开发 者 绑 定 ， 我 们 只 需要 将 被 点 击 的 数据 回 传 给 开发 者 即 可 : 


<Text onpress={this.props.click.bind(this, data[li][k][j])} 
style={styles.left row}>{data[i][k][j]}</Text> 


6. 完整 代码 
至 此 ，MenuList ( 二 级 菜单 ) 组 件 已 经 开发 完成 。 为 了 节省 篇 幅 ， 完 整 代码 可 以 参考 


prefixStyle) > -1){ 
}; 


-一 一 一 


+ nIndex] = true; 
+ nIndex] = defaultBackgroundColor; 
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https://github.com/vczero/react-native-tab-menu/blob/master/tab.js ， 整 个 项 目 可 以 参考 https:/ 
github.com/vezero/react-native-tab-menu。 若 要 使 用 该 模块 ， 可 以 使 用 npm install react-native-tab 


A 人 7 
命令 安装 。 


6.1.3 ”应 用 二 级 菜单 组 件 


组 件 已 经 开发 好 了 ， 现 在 可 以 使 用 二 级 菜单 组 件 了 。 这 里 假设 数据 模型 是 编程 语 
(Language ) 和 开发 工具 (Tool )， 具 体 的 代码 如 下 : 


zl 


var React = require('react-native'); 
Var MenuList = require('./MenuList'); 
var { 

AppRegistry, 

StyleSheet, 

Text， 

View, 

ScrollView, 

TouchableOpacity, 
} = React; 


var data = { 


"Language": { 
"All": ["All"], 
"Web Front End": [ 

"HTML", 
"CSS", 
"JavaScript" 

]， 

"Server": [ 
"Node.js", 
"PHP™, 
"Python", 
"Ruby" 

] 

} 

"Tool":{ 

"All": ["All"], 


"Apple": ["Xcode"], 
"Other": ["Sublime Text", "WebStrom", |] 
} 
}; 


var App = React.createClass({ 
render: function(){ 
return ( 
<View style={{marginTop:25}}> 
<MenuList data={data} nSelected={1} tabSelected={0} 
click={this.onPress}/> 
</View> 
); 
}, 
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onPress: function(val){ 
alert(val); 
} 
]); 


AppRegistry.registerComponent('APP', () => App); 
运行 该 组 件 的 效果 如 图 6-3 所 示 。 


Language Tool 
All HTML 
Web Front End CSS 
Server JavaScript 


图 6-3 ”二 级 菜单 组 件 


6.2 日 历 组 件 


React Native 给 我 们 提供 了 很 多 原生 的 组 件 ， 它 们 的 性 能 和 体验 都 很 好 。 但 是 ， 有 些 组 件 不 
太 符 合 产 品 的 需求 ， 我 们 需要 自己 重新 定义 组 件 ， 比 如 经 常用 到 的 日 历 组 件 。 一 般 情 况 下 , 日 历 
组 件 都 是 “全 页 面 ” 日 历 ， 如 图 6-4 所 示 。 


< 出 行 时 间 价格 说 明 


| 全 五 


2015 年 9 月 


20 21 22 23 24 25 26 
¥685 ¥685 ¥685 ¥685 ¥685 ¥785 ¥985 


中 秋 28 29 30 


¥1165 ¥1165 ¥1165 


图 6-4 ”全 页 面 日 历 
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6.2.1 开发 日 历 组 件 


日 历 组 件 的 开发 重点 是 计算 日 历 的 逻辑 。 我 们 需要 知道 日 历 显示 多 少 行 , 每 月 的 第 一 天 从 星 
期 几 开始 。 一 个 星期 7 天 , 一 个 月 最 多 31 天 , 这 是 基本 常识 。 但 是 , 我 们 会 误 以 为 7( 天 ) x 5( 天 ) 
就 是 以 表达 一 个 月 份 的 日 历 。 如 图 6-5 所 示 ， 左 图 是 5 行 的 日 历 主体 ， 右 图 是 6 行 的 日 历 主 体 ， 这 
是 我 们 开发 时 需要 注意 的 。 


2015 年 10 月 2015 年 11 月 


2 3 4 1 


19 20 21 22 23 24 2 16 4 18 19 20 21 22 
26 27 28 29 30 31 23 24 25 26 27 28 29 
30 
图 6-5 日 历 主体 
现在 我 们 对 日 历 有 了 个 初步 的 认识 ， 接 下 来 就 开始 开发 日 历 组 件 。 


1. 确定 需求 
开发 组 件 前 , 我 们 需要 想 好 日 历 的 组 件 暴露 的 接口 和 实现 的 功能 。 这 里 , 我 们 需要 完成 的 日 
历 的 接口 和 功能 如 下 所 示 。 
口 全 页 面 日 历 的 实现 ， 可 以 传人 参数 ， 显 示 多 少 个 月 份 ， 默 认 3 个 。 
口 可 以 定义 日 历 开 始 的 日 期 ， 比 如 2015-7-8。 尽 管 该 日 期 已 过 , 但 是 日 历 会 从 7 月 开始 显示 。 
默认 的 开始 日 期 是 今天 。 
口 历史 日 期 以 灰色 字体 显示 ， 从 今天 开始 的 日 期 以 黑色 字体 显示 。 
口 可 以 传人 选中 日 期 ， 该 选中 日 期 会 高 亮 显示 ( 背景 色 为 蓝 色 ， 字 体 为 白色 )。 
口 可 以 定义 星期 栏 的 字体 大 小 和 背景 颜色 。 
口 可 以 显示 节假日 。 
口 点 击 日 期 获取 日 期 字符 串 。 


目前 ， 按 照 以 上 需求 ， 该 日 历 组 件 应 该 可 以 满足 基本 的 业务 需要 。 
2. 确定 接口 


根据 以 上 需求 , 日 历 组 件 需 要 提供 一 个 接口 供 开发 者 传人 参数 。 我 们 希望 开发 人 员 这 样 使 用 
日 历 组 件 : 


render: function(){ 
var holiday = { 
'2015-10-1': ' 国 庆 节 '， 
'2015-9-10': ' 教 师 节 '， 
'2016-1-1': ' 元 旦 节 '， 
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'2015-11-11':' 双 十 一 " 
}; 
var check = { 
'2015-10-1': 'checked', 
"2015-9-1': 'checked', 
'2015-7-10': 'checked', 
'2015-9-10': "checked 
}; 
var headerStyle ={ 
backgroundColor: '#3C9BFD', 
color: '#fff", 
fontSize: 15, 
fontWeight:500, 
}; 
return ( 
<View style={styles.container}> 
<Calendar 
touchEvent={this.press} 
headerStyle={headerStyle} 
holiday={holiday} 
startTime={new Date(2015, 6, 8)} 
check={check} 
num={5} 
/> 
</View> 
); 
} 


在 上 述 代码 中 , num={5} 表 示 全 页 面 日 历 显 示 5 个 月 份 。 holiday 表 示 显 示 节 假日 , 是 JavaScript 
对 象 ，key 值 是 日 期 ，value 为 显示 的 值 。headerstyle 用 于 设置 头 部 的 样式 。startTime 表 示 日 历 
显示 的 开始 时 间 。check 表 示 选 中 的 日 期 ， 一 般 会 高 亮 显 示 。 


3. 初始 化 数据 模型 


接口 可 以 给 我 们 传递 参数 , 但 是 我 们 需要 对 传递 的 参数 进行 模型 转换 , 从 而 变 成 需要 的 model 
对 象 。 这 在 getInitialstate 中 处 理 : 


getInitialstate: function(){ 
// 开 始 时 间 
var startTime = this.props.startTime || new Date(); 
var holiday = this.props.holiday || {}; 
var check = this.props.check || {}; 
var headerStyle = this.props.headerstyle || {}; 
// 显 示 月 份 的 个 数 
var num = this.props.num || 3; 
return { 
startTime: startTime, 
num: num, 
holiday: holiday, 
check: check, 
headerStyle: headerStyle 
}; 
)， 
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4. 计算 日 历 的 行 数 

在 开篇 已 经 知道 ， 日 历 的 行 数 十 分 重要 ， 因 为 这 关系 到 泻 染 日 历 主体 需要 循环 几 次 。 那 么 ， 
日 历 的 行 数 如 何 计算 呢 ? 具体 如 下 : 

日 历 行 数 = (空白 格 数 + 月 份 日 期 占用 的 格 数 即 天 数 ) / 7 

那么 ， 空 白 格 数 如 何 计算 呢 ? 我 们 不 关注 月 末日 期 后 面 的 空格 ， 只 关注 1 号 前 面 的 空格 数 。 
那么 , 如 何 才 能 知道 前 面 有 几 个 空格 呢 ? 这 个 比较 好 办 , 就 是 1 号 是 星期 几 , 就 说 明 前 面 存在 ( 星 
期 几 -1 ) 个 空格 : 

空格 数 = 1 号 星期 几 一 1; 

最 后 的 目标 是 希望 算出 该 月 份 有 多 少 行 日 期 。 综 合 上 面 的 两 个 等 式 ， 可 以 得 出 : 

日 历 行 数 = Math.ceil(( 月 份 的 天 数 + 1 号 星期 几 一 1) / 7) 


之 所 以 向 上 取 整 ， 主 要 有 两 个 原因 : 行 数 是 整数 ， 当 出 现 小 数 点 , 说 明 必须 多 开 闭 一 个 空格 
给 日 期 占用 ， 也 就 是 多 开 闭 一 行 。 转化 成 代码 就 是 : 


var date = this.state.startTime; 
var num = this.state.num; 
var holiday = this.state.holiday; 
var check = this.state.check; 
var headerStyle = this.state.headerStyle; 
var items = []; 
var dateNow = new Date(); 
for(var n = 0; Nn < num; n++){ 
/* 循 环 完成 一 个 月 */ 
var rows = []; 
var newDate = new Date(date.getFullYear(), date.getMonth() + 1 + n, 0); // 天 数 
var week = new Date(date.getFullYear(), date.getMonth() + n，1).getDay(); // 月 份 开始 的 星期 
if(week === 0){ 
week = 7; 
} 
var counts = newDate.getDate(); 
var rowCounts = Math.ceil((counts + week - 1) / 7); // 本 月 行 数 
//TODO: 泻 染 日 期 行 
} 


5. 演 染 视图 

我 们 已 经 知道 了 日 历 行 数 ， 现 在 泻 染 日 历 视图 就 要 容易 得 多 。 这 里 的 日 历 泻 染 实际 上 是 3 个 
for 循 环 。 第 一 层 循环 是 全 页 面 展 示 几 个 月 份 ， 第 二 层 循环 是 每 个 月 泻 染 几 行 ， 第 三 层 是 泻 染 每 
个 日 期 。 这 里 之 所 以 单独 泻 染 每 个 日 期 , 是 因为 有 时 候 需 要 给 日 期 加 上 标识 , 比如 节假日 的 显示 。 
主体 的 逻辑 代码 如 下 : 

render: function() { 

var date = this.state.startTime; 


var num = this.state.num; 
var holiday = this.state.holiday; 
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var check = this.state.check; 
var headerStyle = this.state.headerStyle; 
var items = []; 
var dateNow = new Date(); 
for(var n = 0; Nn < num; n++){ 
/* 循 环 完成 一 个 月 */ 
var rows = []; 
var newDate = new Date(date.getFullYear(), date.getMonth() + 1 + Nn, 0); // 天 数 
var week = new Date(date.getFullYear(), date.getMonth() + n，1).getDay(); // 月 份 开始 的 星期 
if(week === 0){ 
week = 7; 
var counts = newDate.getDate(); 
var rowCounts = Math.ceil((counts + week - 1) / 7); // 本 月 行 数 
for(var i = 0; i «< rowCounts; i++){ 
var days = []; 
for(var j = (i * 7) + 1; j < ((i+1) * 7) + 1; j++){ 
// 根 据 每 个 月 开始 的 [星期 ] 往 后 推 
var dayNum = j - week + 1; 
if(dayNum > 0 8&& j < counts + week){ 
// 如 果 当 前 日 期 小 于 今天 ， 则 变 灰 
var date0bj = new Date(date.getFullYear(), 
date.getMonth() + n, dayNum); 
var dateStr = dateObj.getFullYear() + '-'+ 
(date0bj.getMonth() + 1) + '-" + dayNum; 
var grayStyle = {}; 
var bk = {}; 
if(dateNow >= new Date(date.getFullYear(), 
date.getMonth() + n, dayNum + 1)){ 
grayStyle = { 
Color: '#ccc" 
}; 


} 
if(holiday[dateStr]){ 
dayNum = holiday[dateStr]; 
} 
if(check[ dateStr]){ 
bk = { 
backgroundColor: “#4EB7FF ， 
width:46， 
height:35， 
alignItems: “centeT ， 
justifyContent: “centeT 
}; 
grayStyle = { 
color: '#fff" 
}; 


} 
days.push( 
<TouchableHighlight style={[styles.flex 1]} 
underlayColor="#fff" onpress={this.props.touchEvent? 
this.props.touchEvent.bind(this, dateStr):null}> 
<View style={bk}> 
<Text style={grayStyle}>{dayNum}</Text> 
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</View> 
</TouchableHighlight> 
> 
}else{ 
days.push( 
<View style={[styles.flex 1]}> 
<Text></Text> 
</View> 
村 
} 
: 


rows .push( 
<View style={styles.row}>{days}</View> 
); 
} 
items.push( 
<View style={[styles.cm bottom]}> 
<View style={styles.month}> 
<Text style={styles.month text}>{newDate.getFullYear()} 年 
{newDate.getMonth() + 1} 月 </Text> 
</View> 
{rows} 
</View> 
); 
} 
return ( 
<View style={styles.calendar container}> 
<View style={[styles.row, styles.row header, this.props.headerStyle]}> 
<View style={[styles.flex 1]}> 
<Text style={this.props.headerStyle}>—</Text> 
</View> 
<View style={[styles.flex 1]}> 
<Text style={this.props.headerStyle}>=</Text> 
</View> 
<View style={[styles.flex 1]}> 
<Text style={this.props.headerStyle}>=</Text> 
</View> 
<View style={[styles.flex 1]}> 
<Text style={this.props.headerStyle}> 四 </Text> 
</View> 
<View style={[styles.flex 1]}> 
<Text style={this.props.headerStyle}> 五 </Text> 
</View> 
<View style={[styles.flex 1]}> 
<Text style={[styles.week highlight, this.props.headerStyle]}> 六 </Text> 
</View> 
<View style={[styles.flex 1]}> 
<Text style={[styles.week highlight, this.props.headerStyle]}> 日 </Text> 
</View> 
</View> 
<ScrollView st 
{items} 
</ScrollView> 
</View> 


an 


le={{flex:1,}}> 


Mk 
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); 
} 


6. 完整 的 组 件 代码 


经 过 上 面 的 分 析 ， 我 们 大 致 完成 了 日 历 组 件 。 最 后 ， 可 以 使 用 module.exports 将 组 件 暴露 出 
去 。 目 前 ， 组 件 已 经 发 布 到 npm 上 。 如 果 以 后 要 使 用 该 日 历 组 件 ， 可 以 直接 使 用 npnm 
installrn-calendar 命 令 。 为 了 节省 篇 幅 ， 不 再 附 完整 代码 。 若 需 查 看 完整 的 代码 ， 可 以 参考 


https://github.com/vezero/react-native-calendar/blob/master/calendar.js。 


6.2.2 ”应 用 日 历 组 件 
现在 已 经 开发 好 日 历 组 件 , 接 下 来 就 可 以 使 用 它 了 。 我 们 显示 从 今天 开始 的 10 个 月 份 , 并 | 


日 


显示 自 定义 的 节假日 和 高 亮 显示 一 些 日 期 。 目 前 , 日 历 组 件 已 经 发 布 在 npm 上 上 了， 名 称 为 


rn-calendar。 所 以 直接 使 用 npm install rn-calendar 命 令 安装 即 可 。 演 示 代 码 如 下 所 示 : 


var React = require('react-native'); 
var Calendar = require('rn-calendar'); 
vart{ 

View, 

AppRegistry, 

StyleSheet, 

StatusBarI0OS 
} = React; 


StatusBarI0S.setHidden(true); 


var Index = React.createClass({ 
render: function(){ 
var holiday = { 
'2015-10-1': ' 国 庆 节 '， 
'2015-9-10': ' 教 师 节 '， 
'2016-1-1': ' 元 旦 节 '， 
'2015-11-11':' 双 十 一 " 


var check = { 
"2015-10-1': 'checked', 
"2015-9-1': 'checked', 
"2015-7-10': 'checked', 
"2015-9-10': 'checked', 
"2015-11-11': 'checked'" 

}; 

var headerStyle ={ 
backgroundColor: '#3C9BFD', 
color: '#fff",， 
fontSize: 15， 
fontWeight:500, 


, 
return ( 
<View style={styles.container}> 
<Calendar 
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touchEvent={this.press} 
headerStyle={headerStyle} 
holiday={holiday} 
startTime={new Date()} 


num={10} 
check={check} 
/> 
</View> 
3 
滞 
press: function(str){ 
alert(str); 
)); 


var styles = StyleSheet.create({ 
container: { 
flex: 1， 
backgroundColor: 'blue’ 
} 
]); 


AppRegistry.registerComponent('APP', () => Index); 


上 述 代码 的 运行 效果 如 图 6-6 所 示 。 


息 © iOS Simulator - iPhone 5s - iPhone 5... 


17 18 19 20 
21 22 23 24 25 26 27 
28 29 30 
2015 年 10 月 

2 3 4 

5 6 7 8 9 10 11 

12 13 14 15 16 17 18 

19 20 21 22 23 24 25 
26 27 28 29 30 31 


2015 年 11 月 


图 6-6 “日 历 组 件 运 行 效果 


6.3 ”开源 组 件 
这 里 我 们 已 经 造 了 两 个 轮子 : 二 级 菜单 组 件 和 日 历 组 件 。 有 些 时 候 ， 因 为 项 目 紧 张 ， 没 有 时 
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间 去 造 轮子 ,这 时 候 需 要 寻找 开源 组 件 。 一般 情况 下 ,我 们 都 习惯 在 GitHub 中 搜索 开源 仓库 。 在 
使 用 开源 组 件 的 时 候 , 一 定 要 先 测试 ,确保 组 件 稳定 可 用 。 如 果 开 源 组 件 不 满足 需求 , 需要 有 能 
力 修改 组 件 源码 以 满足 自己 的 需求 。 在 这 一 节 中 ， 我 们 介绍 两 个 常用 的 开源 组 件 。 


6.3.1 react-native-swiper 


一 款 APP， 尤 其 是 内 容 主 导 的 APP 都 存在 一 个 组 件 一 一 轮 播 组 件 。 我 们 在 GitHub 上 找到 了 
react-native-swiper 组 件 。 细 致 地 看 下 react-native-swiper 的 文档 ， 发 现 该 组 件 满足 我 们 做 轮 播 组 件 
的 需求 。 现 在 我 们 使 用 react-native-swiper 来 开发 一 个 示例 。 


1. 安装 


汉 react-native-swiper 


我 们 可 以 通过 npm 安 装 react-native-swiper。 在 项 目的 根 目录 ( 即 package.json 文 件 所 在 的 目录 ) 
开启 终端 ， 输 入 如 下 命令 : 


$ npm i react-native-swiper --save 
等 待 一 下 ， 会 发 现 安装 成 功 。 
2. 演示 示例 
安装 成 功 后 ， 需 要 确保 组 件 能 够 正常 使 用 。 我 们 从 GitHub 上 复制 下 来 ,具体 代码 如 下 : 


var Swiper = require('react-native-swiper'); 
var React = require('react-native'); 
var { 
AppRegistry, 
StyleSheet, 
Text， 
View, 
} = React; 


var swiper = React.createClass({ 
render: function() { 

return ( 

<View> 

<Swiper style={styles.wrapper} showsButtons={true}> 

<View style={styles.slide1}> 

<Text style={styles.text}> 第 一 张 </Text> 

</View> 

<View style={styles.slide2}> 

<Text style={styles.text}> 第 二 张 </Text> 


<View style={styles.slide3}> 
<Text style={styles.text}> 第 三 张 </Text> 


</View> 
</Swiper> 
</View> 
); 
} 
六 
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var styles = StyleSheet.create({ 
wrapper: { 
2 
slide1: { 
flex: 1， 
justifyContent: “centeT ， 
alignItems: “centeT ， 
backgroundColor: '#9DD6EB', 
} 
slide2: { 
flex: 1， 
justifyContent: “centeT ， 
alignItems: “centeT ， 
backgroundColor: “#97CAE5 ， 


justifyContent: “centeT ， 
alignItems: “centeT ， 
backgroundColor: “#92BBD9 ， 

】， 

text: { 
color: '#fff", 
fontSize: 30， 
fontweight: "bold ， 

} 

}); 


AppRegistry.registerComponent('APP', () => swiper); 

我 们 在 Xcode 上 使 用 快捷 键 cmd+R 运 行 项 目 ， 编 译 并 启动 成 功 。 注 意 : 如 果 使 用 npm install 
安装 了 新 的 组 件 ， 需要 在 Xcode 上 重新 编译 启动 ， 以 加 载 node_module 里 面 全 部 的 库 。 如 果 只 是 在 
模拟 器 上 使 用 快捷 键 cmd+R 刷 新 ， 是 不 会 加 载 刚 安装 的 组 件 的 。 示 例 的 运行 效果 如 图 6-7 所 示 。 


Carrier 全 3:57 PM mw 


图 6-7 轮 播 
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3. 开发 图 片 轮 播 功能 


刚才 已 经 看 到 轮 播 的 效果 ， 现 在 需要 使 用 react-native-swiper 来 开发 图 片 轮 播 组 件 。 其 实 该 组 
件 已 经 包含 了 很 多 功能 和 API。 我 们 使 用 既 有 的 API 即 可 。 我 们 的 代码 如 下 : 


Var swiper = React.createClass({ 
render: function() { 
return ( 
<View style={{marginTop:23}}> 
<Swiper style={styles.wrapper} showsButtons={false} autoplay={true} height={200}> 
<View style={styles.slide1}> 
<Image 
style={{height:200,width:320}} 
resizeMode="stretch" 
source={{uri:'http://vczero.github.io/ctrip/lvtu/img/2.jpg' }}/> 
</View> 
<View style={styles.slide2}> 
<Image 
style={{height:200,width:320}} 
resizeMode="stretch" 
source={{uri:'http://vczero.github.io/ctrip/lvtu/img/city.jpg' }}/> 
</View> 
<View style={styles.slide3}> 
<Image 
style={{height:200, width:320}} 
resizeMode="stretch" 
source={{uri:'http://vczero.github.io/ctrip/lvtu/img/4.jpg' }}/> 


</View> 
</Swiper> 
</View> 
)); 


这 里 我 们 没有 将 样式 代码 独立 出 来 是 为 了 方便 贴 代 码 ， 节 省 空间 。 在 Swiper 组 件 中 主要 使 用 
了 如 下 属性 。 
口 showsButtons={false}: 隐藏 左右 滑动 的 箭头 。 
口 autoplay={true}: 自动 轮 播 。 
口 height={200}: 设置 轮 播 组 件 的 包 庄 容器 高 度 。 注 意 : 这 里 需要 使 用 属性 设置 ， 不 能 使 
用 样式 设置 。 
同时 ， 我 们 将 Text 组 件 替 换 成 了 组 件 Image， 循 环 播 放 3 张 图 片 。 其 实 图 片 的 大 小 可 以 使 用 
Dimensions 获 取 屏 幕 的 大 小 来 设置 。 这 里 ， 我 们 简单 地 将 其 设置 为 ?220。 因 为 使 用 了 开源 组 件 ， 
所 以 图 片 轮 播 的 功能 可 以 轻松 完成 。 运 行 效果 如 图 6-8 所 示 。 关 于 react-native-swiper 的 更 多 API， 
可 以 参考 https://github.com/leecade/react-native-swiper。 
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Carrier 倒 4:34 PM 


图 6-8 图片 轮 播 效果 


4. 源码 阅读 
使 用 react-native-swiper 开 发 图 片 轮 播 功能 ， 十 分 方便 。 但 是 ,我 们 希望 了 解 如 何 实现 滚动 视 
图 ? 是 动画 隐藏 视图 还 是 使 用 了 ScrollView? 我 们 在 GitHub 上 找到 react-native-swiper 的 源码 ， 发 
现 源码 并 不 是 很 多 ,但 是 设计 还 是 很 巧妙 ， 如 下 所 示 : 
return ( 
<View style={[styles.container, { 


width: state.width, 
height: state.height 


<ScrollView ref="scrollView" 
{...props} 
contentContainerStyle={[styles.wrapper, props.style]} 
contentOffset={state.offset} 
onScrollBeginDrag={this.onScrollBegin} 
onMomentumScrollEnd={this.onScrollEnd}> 
{pages} 

</ScrollView> 

{props. showsPagination 8& (props.renderPagination 
? this.props.renderpagination(state.index, state.total, this) 
: this.renderpPagination())} 

{this.renderTitle()} 

{this.props.showsButtons && this.renderButtons()} 

</View> 


) 


可 以 发 现 ，react-native-swiper 组 件 使 用 ScrollView 作 为 轮 播 组 件 的 基础 ， 通 过 计算 步 长 滚动 。 
更 多 细节 ， 可 前 往 https://github.com/leecade/react-native-swiper/blob/master/src/index.js 了 解 。 


= 


6.3.2 react-native-modal 


我 们 在 使 用 支付 宝 支付 的 时 候 ， 会 看 到 有 一 个 支付 的 遮 罩 层 ， 这 样 用 户 就 可 以 只 关心 支付 ， 
而 不 会 操作 支付 宝 的 其 他 功能 。 在 React Native v0.10 之 前 ， 是 不 存在 模 态 对 话 框 的 。GitHub 上 有 
一 个 开源 的 组 件 react-native-modal， 它 的 API 比 较 丰 富 ， 使 用 react-native-modal 开 发 模 态 对 话 
框 相关 的 功能 是 一 个 不 错 的 选择 。 
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这 里 我 们 来 简单 实现 火车 票 购 票 的 支付 模 态 对 话 杠 。 之 所 以 选择 react-native-modal， 主 要 有 
两 个 原因 : 一 是 该 组 件 的 API 相 对 丰富 ， 二 是 可 以 很 好 地 演示 需要 编译 的 开源 组 件 如 何 使 用 。 我 
们 按照 如 下 步骤 来 实现 该 功能 。 

1. 安装 react-native-modal 

通过 阅读 GitHub 上 的 文档 和 react-native-modal 的 源码 ， 我 们 知道 该 组 件 依赖 的 第 三 方 组 件 是 
包含 Objective-C 代 码 的 ， 因 此 需要 编译 。 我 们 首先 使 用 npm 安 装 该 组 件 。 

在 项 目的 根 目 录 下 ( 即 package.json 和 node_modules 同 级 目录 ) 打开 终端 ， 输 入 如 下 命令 : 


npm install react-native-modal --save 
安装 完成 后 ， 我 们 需要 添加 该 组 件 到 项 目 中 ,具体 步骤 如 下 。 


(1) 打开 Xcode ， 右 击 项 目的 Libraries ， 选 择 Add Files to“Your Project Name” ， 然 后 选择 
node modules/react-native-modal/RNModal.xcodepro]j。 


(2) 选择 项 目 , 在 右边 选择 Build Phases 一 Link Binary With Libraries， 选 择 libRNModal.a 即 可 。 


2. 使 用 react-native-modal 


react-native-modal 的 API 有 很 多 ， 这 里 我 们 使 用 isVisible 和 onClose 事 件 监 听 。 我 们 将 需要 的 
视图 放 在 Modal 里 即 可 ， 完 整 的 代码 如 下 : 


var React = require('react-native'); 
var Modal = require('react-native-modal'); 
var { 


AppRegistry, 
StyleSheet, 
View, 
Navigator, 
TouchableOpacity, 
Text， 
PixelRatio 
} = React; 


var CloseBtn = React.createClass({ 
render: function(){ 


return( 
<View> 
<Text> 关 闭 </Text> 
</View> 
» 
} 
3 


var App = React.createClass({ 
getInitialState: function(){ 
return{ 
isModalOpen: true 


}; 
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}, 
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openModal: function(){ 


this.setState({i 


}, 


closeModal: functi 
this.setState({i 


}, 


render: function( 


sModalOpen: true}); 


onO){ 
sModalOpen: false}); 


{ 
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return ( 
<View style={styles.page}> 
<Text onpress={() => this.openModal()}> 
预定 火车 又 
</Text> 
<Modal 
isVisible={this.state.isModalOpen} 
onClose={() => this.closeModal()} > 
<View style={styles.zhifu}> 
<Text style={styles.date}>2015/10/01</Text> 
<View style={styles.row}> 
<View style={styles.point}> 
<Text style={styles.station}> 上 海 站 </Text> 
<Text style={styles.mp10}>8:00</Text> 
</View> 
<View> 
<Text s 
<Text s 
0321 
</Text> 
</View> 
<View style={styles.point}> 
<Text style={[styles.station, {textAlign:'right'}]}> 北 京 站 </Text> 
<Text style={[{textAlign: 'right'}, styles.mp10]}>12:35</Text> 
</View> 
</View> 


tyle={styles.at}></Text> 
tyle={[styles.mp10, {textAlign:'center' }]}> 


<View style={styles.mp10}> 

<Text> 票 价 : ¥500.0 元 </Text> 

<Text> 乘 车 人 : 王 **</Text> 

<Text> 上 海 站 2 层 火车 厅 15 检 票 口 </Text> 

</View> 

<View style={[styles.mp10, {alignItems:'center' }]}> 
<View style={styles.btn}> 

Text style={styles.btn text}> 去 支付 /Text> 


入 


</View> 
</View> 
</View> 
</Modal> 
</View> 
好 

} 
1}; 
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var styles = StyleSheet.create({ 
page: { 

flex: 1， 

position: "absolute '， 

bottom: 0， 

left: 0， 

right: 0， 

top: 23 


zhifu:{ 
height: 150， 

}), 

row:{ 
flexDirection:'row' 


fontSize:20, 

}, 

at:{ 
color: '#3BC1FF', 
borderWidth:1 / PixelRatio.get() ， 
width:80， 
borderColor: '#18B7FF ' ， 
height:1， 
marginTop:10 

}, 

date:{ 
textAlign: 'center', 
marginBottom:5 


} A Carrier 会 7:58 PM [Co 
station:{ 


fontSize:20 
外 
mp10:{ 
marginTop:5 


了 
btn:{ 

width:60， 
height:30 
ee 2015/10/01 

eg 海 立 证 入 
backgroundColor: '#FFBA27 ， i G321 en 
padding:5， : 


》 “ 
海 站 2 层 火车 厅 15 检 票 
btn text:{ 民 信 二 厅 19 和 人 


lineHeight:18, EE 


textAlign: 'center', 
color: '#fff", 
} 
}); 


AppRegistry.registerComponent('APP', () => App); 


整个 代码 的 运行 效果 如 图 6-9 所 示 。 图 6-9 火车 票 预订 
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热 更 新 和 上 名 


在 iOS 应 用 开发 中 ， 令 我 们 最 难以 忍受 的 就 是 每 次 发 布 新 版 本 时 漫长 的 审核 期 。 对 于 大 多 数 
敏捷 开发 团队 来 说 , 为 了 能 够 快速 出 产品 、 出 成 果 , 一 个 版 本 的 迭代 周期 往往 缩短 在 几 天 的 时 间 
里 。 所 以 经 常会 遇 到 当前 版 本 还 未 审核 通过 ,新 版 本 就 已 经 开发 完成 的 尴 众 局 面 ， 因 此 开发 团队 
不 得 不 将 版 本 发 布 周期 改 为 两 周 其 至 一 个 月 ， 以 迎合 苹果 效率 低下 的 评审 周期 。 而 React Native 
中 的 JavaScript 代 码 是 按 动态 加 载 执行 的 ， 因 此 从 服务 器 端 动态 更 新 JavaScript 代 码 来 实现 应 用 的 
更 新 成 为 了 可 能 。 当 然 ， 如 果 是 涉及 React Native 框 架 本 身 的 更 新 ， 还 要 通过 重新 发 布 应 用 来 完 
成 。 本 章 中 , 我 们 会 介绍 一 种 动态 更 新 的 方法 。 此 外 ， 对 于 刚 上 手 的 同学 ,本 章 也 会 介绍 苹果 应 
用 上 架 的 流程 。 


7.1 动态 更 新 


在 传统 Web 开 发 中 我 们 在 JavaScript 中 修改 完 逻 辑 ， 直 接 在 浏览 器 上 刷新 就 可 以 看 到 效果 了 。 
之 所 以 能 这 么 做 , 首先 因为 JavaScript 是 一 门 动态 语言 ,并 不 需要 编译 ,然后 浏览 器 每 次 刷新 都 动 
态 地 从 服务 端 加 载 JavaScript 文 件 。 相 信 大 家 都 知道 ,针对 Web 应 用 优化 中 最 简单 也 是 最 有 效 的 就 
是 缓存 ， 当 服务 端 没 有 更 新 ， 那 浏 览 器 请 求 时 则 无 须 每 次 重新 下 载 整个 文件 。 我 们 在 React Native 
实现 的 动态 更 新 也 是 同样 的 思路 ，React Native 中 JavaScript 代 码 最 终 都 会 打包 成 一 个 jsbundle 文 
件 ,， 我 们 只 在 需要 更 新 的 时 候 , 在 应 用 中 从 远程 服务 器 上 下 载 这 个 文件 ， 并 重新 加 载 ， 就 可 以 完 
成 动态 更 新 同时 无 须 通 过 App Store 重 新 发 布 。 试 想 一 下 , 在 一 个 电 商 应 用 中 可 以 随时 修改 我 们 的 
商品 界面 ， 例 如 设计 布局 ， 并 且 绕 过 漫长 的 审核 周期 这样 的 改变 无 疑 是 非常 有 价值 的 。 


7.1.1 初始 化 设置 


在 React Native 的 生成 代码 中 , 默认 会 提示 我 们 将 jsCodeLocation 设 置 为 远程 服务 地 址 或 者 本 
地 资源 的 路 径 : 


// 直 接 引用 远程 文件 
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jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"]; 


// 从 本 地 资源 读 取 

jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; 

如 果 要 实现 动态 更 新 ， 最 简单 的 方法 就 是 以 采用 远程 文件 的 方式 来 提供 jsCodeLocation。 但 
是 , 这 样 做 也 有 一 些 弊端 , 例如 首次 使 用 的 延 时 、 网 络 劫持 等 行为 也 可 能 让 应 用 出 现 意外 。 因 此 ， 
这 里 建议 使 用 维护 本 地 文件 的 方式 来 实现 热 更 新 。 首 先 ， 需 要 动态 设置 jsCodeLocation。 这 里 我 
们 创建 一 个 Native API 组 件 VersionManager 来 实现 动态 更 新 。 每 一 个 应 用 的 版 本 都 需要 为 本 地 资 
源 的 bundle 文 件 设置 一 个 初始 版 本 ， 每 次 应 用 启动 时 通过 [VersionManager currentVersionPath] 
方法 来 动态 返回 当前 版 本 的 jsCodeLocation: 


//AppDelegate.m 

- (BOOL)application: (UIApplication *)application 
didFinishLaunchingWithOptions: (NSDictionary *)launchOptions 

{ 


// 设 置 内 置 资 源 版 本 号 
[VersionManager setInAppVersion:@"FIRST VERSION" ] ; 
RCTBridge *bridge = [[RCTBridge alloc] initwithDelegate:self launchoptions:]aunchOptions ] ; 
RCTRootView *rootView = [[RCTRootView alloc] 
initWithBridge:bridge moduleName:@"..." initialPproperties:nil]; 


} 


//RCTBridge 委 托 方法 ， 返 回 当前 jsbundle 文 件 的 地 址 
- (NSURL *)sourceURLForBridge:( unused RCTBridge *)bridge 


return [VersionManager currentVersionpath]; 


} 

每 次 成 功 更 新 jsbundle 文 件 后 ， 都 需要 缓存 最 新 的 版 本 号 以 及 上 一 个 版 本 号 。 首 先 ， 缓 存 最 
新 版 本 号 的 目的 很 简单 ， 就 是 为 了 获取 当前 版 本 的 JavaScript 文 件 的 路 径 。 因 此 ， 对 于 jsbundle 文 
件 的 本 地 缓存 沙 盒 路 径 ， 必 须 是 可 以 通过 版 本 号 来 定位 获取 的 ， 例 如 这 样 的 存储 路 径 : 


/Documents 
|---- ReactNative 
| --- 1.0.0 
|---- main.jsbundle 
| --- 1.1.0 
|---- main.jsbundle 


这 里 我 们 缓存 上 一 个 版 本 号 , 这 是 因为 如 果 发 布 了 一 个 有 缺陷 的 版 本 , 可 能 会 导致 应 用 骨 溃 ， 
此 时 则 需要 回 滚 至 上 一 个 版 本 来 保证 用 户 正常 使 用 。 

最 后 ， 我 们 需要 有 一 个 远 端 Restful API 服 务 ， 通 过 访问 这 个 远 端 服务 来 获得 当前 应 用 版 本 文 
持 最 新 的 bundle 文 件 的 版 本 号 。 版 本 服务 器 端 大 致 提供 了 如 下 几 个 信息 : 最 新 版 本 、 版 本 地 址 和 


图 灵 社 区 会 员 蚂 蜂 (240671488@qq.com) 专 享 尊重 版 权 


238 区 第 7 章 热 更 新 和 上 架 


校 验 码 。 相 关 代 码 如 下 : 
{ 
"JatestVersion": "2.0", 


"path":"..." 
"checksum":"..." 


7.1.2 ”更 新 逻辑 

更 新 的 大 致 流程 如 下 。 

(1) 通过 Restful 服 务 获得 当前 App 版 本 支持 的 最 新 的 bundle 文 件 版 本 。 

(2) 将 模块 中 缓存 的 当前 版 本 信息 与 之 对 比 ， 如 果 无 须 更 新 ， 则 中 止 流程 。 

(3) 如 果 需 要 更 新 , 则 通过 之 前 Restful 服 务 请 求 的 返回 数据 的 新 版 本 bundle 文 件 的 地 址 来 下 载 
并 校 验 更 新 文件 , 将 文件 存储 在 指定 的 目录 下 ,同时 处 理 版 本 信息 的 维护 , 更 新 当前 版 本 号 以 及 
上 一 个 版 本 号 。 

在 我 们 的 API 组 件 中 ， 需 要 实现 以 下 功能 : 


//VersionManager.h 


// 返 回 当 前 路 径 
+ (NSURL *)currentVersionpath; 


// 访 问 远 程 版 本 的 配置 信息 
- (id)accessRemoteConfig; 


// 下 载 更 新 
- (id)downloadBundle: (NSString *)version; 


在 更 新 策略 上 ， 我 们 可 以 根据 产品 需要 来 选择 不 同 的 策略 。 

可 以 采取 静默 的 方式 实现 动态 更 新 。 我 们 可 以 在 原生 模块 中 监听 App 的 运行 状态 ， 在 启动 时 
静默 检测 ， 并 下 载 和 校 验 更 新 包 完 成 更 新 ， 此 时 在 应 用 下 一 次 启动 时 , 将 会 自动 使 用 最 新 版 本 的 
jsbundle 文 件 : 


- (instancetype)init 


// 在 应 用 启动 时 检测 更 新 
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(appDidLaunch:) 
name:UIApplicationDidFinishLaunchingNotification object:nil]; 
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- (void)appDidLaunch:(id)noti 


// 检 查 远程 版 本 配置 ， 并 更 新 JavaScript 文 件 
} 


此 外 , 也 可 以 提供 给 用 户 , 由 用 户 来 决定 是 否 需 要 更 新 文件 并 重新 加 载 。 我 们 需要 提供 一 些 
API 接 口 暴露 给 JavaScript 调 用 : 


// 获 得 当前 版 本 信息 
RCT_EXPORT_METHOD(getCurrentVersion: (RCTPromiseResolveBlock)resolve 
rejecter: (RCTPromiseRejectBlock)reject) { 


i 


// 检 查 远程 版 本 配置 
RCT_EXPORT METHOD(getLatestVersion: (RCTPromiseResolveBlock)resolve 
rejecter: (RCTPromiseRejectBlock)reject) { 


ee 


// 下 载 JavaScript 

RCT_EXPORT_METHOD( downloadVersion: (NSString *)version 
resolver: (RCTPromiseResolveBlock)resolve 
rejecter: (RCTPromiseRejectBlock)reject) 


{ 

} 

// 重 新 加 载 JavaScript 
RCT_EXPORT_METHOD(Teloadversion:(NSString *)version 


resolver: (RCTPromiseResolveBlock)resolve 
rejecter: (RCTPromiseRejectBlock)reject) 


{ 
} 
这 样 就 可 以 在 JavaScript 中 调用 模块 方法 来 完成 更 新 流程 : 


VersionManager.getLatestVersion() 
.then( (config) => { 


// 如 果 存 在 新 版 本 ， 则 下 载 
VersionManager.downloadVersion(config.1atestVersion) 
.then( 

// 校 验 文件 ， 提 示 更 新 


).catch( 


pe 
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(err) => {console.log(err); 


》 


7.1.3 回 滚 策略 


在 日 常 的 开发 中 , 纵然 有 多 道 程序 去 测试 , 也 免不了 有 时 候 发 布 上 去 的 版 本 会 存在 这 样 那样 
的 问题 。 传 统 的 解决 方案 是 将 之 前 的 版 本 重新 发 布 一 次 。 但 是 我 们 也 知道 发 布 流程 非常 耗 时 , 万 
其 是 大 公司 ,流程 走 的 更 多 ， 回 滚 需要 的 时 间 也 会 更 长 。 这 里 我 们 不 解决 所 有 的 回 滚 问题 ， 主 要 
阐述 一 种 bundle 文 件 中 报错 的 回 滚 机 制 。 在 调试 模式 下 ， 我 们 可 以 在 控制 台中 看 到 错误 ， 也 好 定 
位 和 分 析 问 题 出 现在 哪里 。 但 在 生产 环境 下 ， 就 比较 麻烦 了 ,会 直接 导致 应 用 骨 溃 。 这 里 我 们 主 
要 冰 述 生产 环境 下 bundle 中 报错 的 回 滚 机 制 。 我 们 通过 原生 代码 去 监控 bundle 文 件 。 当 应 用 崩溃 
时 ， 先 要 判断 出 是 否 是 React Native 跑 出 的 异常 ， 同 时 定义 自己 的 回 滚 策 略 ， 例 如 当 骨 溃 次 数 与 
启动 次 数 的 比值 达到 多 少时 执行 回 滚 操作 。 根 据 前 面 的 介绍 ， 每 次 更 新 完 的 bundle 文 件 都 会 有 两 
个 版 本 并 存 ， 即 当前 版 本 和 上 一 个 版 本 。 如 果 当 前 版 本 出 现 问题 ， 我 们 不 需要 重新 发 布 代码 ， 
App 中 会 自动 将 地 址 切换 到 上 一 个 版 本 ， 以 达到 代码 回 滚 。 


下 面 是 简单 的 代码 实现 : 


//AppDelegate.m 


- (BOOL)application: (UIApplication *)application 
didFinishLaunchingWithOptions: (NSDictionary *)launchOptions 


{ 
NSSetUncaughtExceptionHandler(&uncaughtExceptionHandler); 


2 


void uncaughtExceptionHandler(NSException *exception) { 
// 判 断 JavaScript 异 常 ， 处 理 回 滚 策略 。 
// 处 理 版 本 信息 ， 回 退 至 上 一 个 版 本 
[VersionManager revertToprevious]; 


} 

通过 上 面 的 学 习 , 一 个 简单 的 热 更 新 流程 就 算 完成 了 。 当 然 , 里 面 还 有 很 多 需求 和 细节 需要 
我 们 不 断 完善 , 但 是 大 体 思路 应 该 就 是 这 样 。 男 外 ， 在 动态 更 新 机 制 带 来 的 优势 下 ,代码 安全 性 
的 劣势 也 将 会 被 进一步 放大 ， 核 心 代码 的 安全 将 会 是 未 来 大 家 关注 的 一 个 问题 。 


7.2 App 上 架 


学 习 到 这 里 的 时 候 , 我 们 相信 你 完全 可 以 用 本 书 学 到 的 知识 来 开发 一 个 完整 的 App 了 。 但 是 ， 
开发 App 的 最 终 目的 还 是 要 给 用 户 来 使 用 才能 体现 出 它 的 价值 。 在 开发 的 过 程 中 ,我 们 一 般 会 经 
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历 这 么 几 个 阶段 。 首 先 在 模拟 器 中 调试 ， 然 后 再 使 用 真 机 调试 ， 发 布 测试 ， 最 后 才 是 正式 发 布 在 
App Store 上 。 在 这 一 节 中 ， 我 们 就 来 学 习 App 开 发 中 的 最 后 一 个 环节 一 一 App 的 发 布 ， 即 如 何 将 
App 发 布 在 App Store 上 。 


7.2.1 证 书生 成 
应 用 要 成 功 发 布 ， 首 先 需 要 准备 以 下 环节 : 
口 生成 发 布 证 书 ; 
口 生成 应 用 的 唯一 标识 App ID ; 
口 生成 发 布 证 书 、App ID 对 应 的 描述 文件 。 


整个 过 程 略 有 些 复杂 ， 下 面 为 大 家 详细 介绍 一 下 。 

1. 生成 发 布 证 书 

首先 ， 我 们 的 账号 必须 加 入 苹果 开发 者 计划 。 登 录 Member Center 界 面 ， 进 入 Certificates， 
Identifiers & Profiles， 如 图 7-1 所 示 。 


LA 
甸 Developer 
People Programs & Add-ons Your Account 


Organization: Yangzhou Yishengleju Information Service Co., Ltd. 


”SDKs 
SDK Download the SDKs and the latest beta software. I 


Certificates, Identifiers & Profiles 
Manage your certificates, identifiers, devices, and profiles 
for your apps. 


iTunes Connect 


Manage your apps published on the App Store and Mac ; 
App Store. 
€ 


图 7-1 用户 中 心 界面 
在 打开 的 界面 中 选择 Certificates 证 书 菜单 ， 如 图 7-2 所 示 。 
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| iOS Apps 


Certificates 
加 Identifiers 
1 Devices 


| Provisioning Profiles 


Learn More 


| App Distribution Guide 


图 7-2 Certificates 界 面 


然后 进入 了 Certificates, Identifiers & Profiles 页 面 , 在 这 个 页 面 中 可 以 生成 证 书 , 并 设置 App ID 
以 及 描述 文件 。 


我 们 先生 成 证 书 。 点 击 Certificates 菜 单 下 的 Production 证 书 类 型 ,然后 点 击 右上 方 的 添加 符号 


人 » 
新 增 一 个 证 书 ， 如 图 7-3 所 示 。 
Certificates, Identifiers & Profiles 
iOS Apps iDS Certificates (Production) © Q 
WB Certificates 3 Certificates Total 
All Name Type Expires 
Fending APNS Production 195 Sep 07, 2016 
Developurent APNs Production iOS Aug 30, 2016 
Production 
iOS Distwribution Sep 28, 2016 
wn ldentifiers | 
App IDs 


图 7-3 ”添加 证 书 界面 


此 时 就 会 进入 一 个 注册 之 类 的 流程 界面 , 引导 我 们 一 步 步 完成 证 书生 成 。 这 里 是 为 了 让 应 用 
上 上架， 所 以 选择 App Store and Ad Hoc 项 ， 如 图 7-4 所 示 。 
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Production 


© App Store and Ad Hoc 
Sign your iOS app for submission to the App Store or for Ad Hoc distribution. 


Apple Push Notification service SSL (Production) 
Establish connectivity between your notification server and the Apple Push Notification servic 
production environment. A separate certificate is required for each app you distribute. 


Pass Type ID Certificate 
Sign and send updates to passes in Wallet. 


图 7-4 ”选择 证 书 类 型 界面 


接着 点 击 “ 下 一 步 ” 按 钮 ， 此 时 会 看 到 一 个 讲述 如 何 生 成 证 书签 名 CSR 文 件 的 用 户 手册 。 看 
完 之 后 继续 ， 此 时 会 要 求 我 们 上 传 CSR 文 件 ， 如 图 7-5 所 示 。 


人 hn 了 
Generate your certificate. 


When your CSR file is created, a public and private key pair is automatically generated. Your 
private key is stored on your computer. On a Mac, itis stored in the login Keychain by default 
and can be viewed in the Keychain Access app under the "Keys" category. Your requested 
certificate is the public half of your key pair. 


Upload CSR file. 
Select .certSigningRequest file saved on your Mac. 


ee =| 


图 7-5 ”上传 证 书签 名 文件 界面 
根据 之 前 界面 中 介绍 的 流程 ， 我 们 需要 通过 钥匙 串 来 生成 一 个 证 书签 名 文件 。 


我 们 可 以 通过 在 Spotlight 中 键入 keychain 或 者 “应 用 程序 ”一 “实用 工具 ”一 “钥匙 串 访问 ” 
菜单 来 进入 钥匙 串 界 面 , 然后 选择 “钥匙 串 访问 ”一 “证书 助理 ”一 “从 证 书 颁发 机 构 请 求证 书 .…” 
菜单 ， 如 图 7-6 所 示 。 
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关于 钥匙 串 访问 


打开 .… 

创建 证 书 … 

创建 证 书 颁 发 机 构 … 

作为 证 书 颁 发 机 构 为 其 他 人 创建 证 书 … 


本 ER 文 件 编辑 显示 窗口 、 帮 助 


隐藏 钥匙 囊 访 问 多 HH 四 Dej E375 并 


隐藏 其 他 立 8H | 设 定 默认 证 书 颁 发 机 构 … 
全 部 显示 评估 “XRamp Global Certification Authority”.… 


退出 钥匙 串 访 问 38Q 


图 7-6 ”请 求证 书 选 择 界面 


此 时 会 要 求 填写 用 户 电子 邮件 ， 这 可 以 用 开发 者 账号 的 注册 邮箱 。 常 用 名 称 可 以 随意 填写 。 
最 后 选择 “存储 到 磁盘 ， 生 成 文件 ， 如 图 7-7 所 示 。 
@ 证 书 助理 
证 书信 息 


输入 您 正在 请 求 的 证 书 的 相关 信息 。 点 按 “ 继 续 "以 从 CA 请 求证 书 。 


用 户 电子 邮件 地 址 : 六 
常用 名 称 : 
CA 电子 邮件 地 址 : 
请 求 是 : 全) 用 电子 邮件 发 送 给 CA 
@ 存储 到 磁盘 
让 我 指定 密 钥 对 信息 
继续 


图 7-7 ”证 书信 息 填写 界面 


这 样 我 们 的 证 书签 名 文件 就 算 生 成 了 。 接 下 来 ,继续 生成 应 用 发 布 证 书 。 回 到 图 7-5 所 示 的 
界面 ， 选 择 并 上 传 生成 的 证 书签 名 文件 ， 成 功 后 就 会 跳 转 图 7-8 所 示 的 证 书 下 载 界面 ， 根 据 页 面 
上 介绍 的 流程 ,下 载 并 且 点 击 证 书 文件 ,完成 证 书 的 安装 。 这 里 需要 注意 的 是 ， 如 果 第 三 方 希望 
使 用 这 个 发 布 证 书 ， 直 接 从 账户 界面 中 下 载 证 书 将 会 因为 缺少 密 钥 而 无 法 使 用 。 因 此 , 在 安装 完 
证 书后 ,我 们 会 从 钥匙 串 中 备份 成 功 安装 的 证 书 ， 而 备份 文件 中 将 会 包含 证 书 以 及 密 钥 。 第 三 
只 需要 通过 这 个 备份 文件 来 安装 证 书 就 可 以 正常 使 用 了 。 
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从 ho 
WW 


Your certificate is ready. 


Download, Install and Backup 
Download your certificate to your Mac, then double click the .cer file to install in Keychain 
Access. Make sure to save a backup copy of your private and public keys somewhere secure. 


Name: iOS Distribution: Yangzhou Yishengleju Information Service Co., Ltd. 
Type: iOS Distribution 
Expires: 十 月 04, 2016 


Documentation 
For more information on using and managing your certificates read: 


App Distribution Guide 


图 7-8 ”发 布 证 书 下 载 界 还 


2. 注册 App ID 
App ID 是 苹果 设备 识别 应 用 的 唯一 标识 。 回 到 图 7-3 所 示 的 界面 中 , 选择 Identifiers 一 App IDs， 
然后 点 击 右 上 方 的 添加 按钮 ， 进 入 注册 页 面 ， 将 会 要 求 填 人 以 下 信息 。 
口 App ID Description: 描述 ， 随 便 填 。 
口 App ID Prefix: 苹果 自动 生成 的 TeamID。 
口 App ID Suffix: 这 里 就 是 我 们 为 应 用 定义 的 标识 ,需要 与 应 用 中 的 Bundle Identifier 一 致 。 
这 里 允许 通过 Wildcard App ID 使 用 x 来 匹配 多 个 Bundle Identifier。 
在 键入 应 用 的 Bundle Identifier 后 ， 苹 果 会 自动 监测 该 标识 是 否 重复 。 完 成 表单 的 填写 后 ,成 
功 注册 App ID。 
3. 添加 描述 文件 
接着 要 创建 描述 文件 了 。 回 到 图 7-3 所 示 的 界面 ， 选择 Provisioning Profiles 一 >Distribution 项 ， 
点 击 添加 按钮 进入 新 建 描 述 文件 的 流程 。 这 里 选择 Distribution 一 App Store， 如 图 7-9 所 示 。 


图 灵 社 区 会 员 蚂 蜂 (240671488@qq.com) 专 享 尊重 版 权 


246 区 第 7 章 热 更 新 和 上 架 


Distribution 


© App Store 
Create a distribution provisioning profile to submit your app to the App Store. 


tvOS App Store 
Create a distribution provisioning profile to submit your tvOS app to the App Store. 


Ad Hoc 
Create a distribution provisioning profile to install your app on a limited number of registered 
devices. 


图 7-9 ”Distribution 界 面 


点 击 “ 继 续 ”按钮 后 ， 会 让 我 们 选择 App ID， 如 图 7-10 所 示 。 


Select Type Configure 


Ee Select App ID. 


PROV 


Ifyou plan to use services such as Game Center, In-App Purchase, and Push Notifications， 
or want a Bundle ID unique to a single app, use an explicit App ID. If you want to create one 
provisioning profile for multiple apps or don't need a specific Bundle ID, select a wildcard 
App1D. Wildcard App IDs use an asterisk (*) as the last digit in the Bundle ID field. Please 
note that i0S App IDs and Mac App IDs cannot be used interchangeably. 


《> 


App ID: demo forreact orgreactnative.demo) 


图 7-10 选择 App ID 界面 
接着 会 让 选择 发 布 证 书 ， 如 图 7-11 所 示 。 
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Select Type Configure 
ey Select certificates. 
PROV 


Select the certificates you wish to indude in this provisioning profila. To use this profile to 
install an app, the certificate the app was signed with must be included . 


(ios Distribution) 


站 (iOS Distribution) 


图 7-11 发布 证 书 界面 


这 里 会 让 我 们 选择 App ID 以 及 发 布 证 书 。 这 两 项 前 面 已 经 成 功 添加 了 , 在 导航 页 面 中 会 有 单 
选 按钮 将 它们 显示 出 来 。 选 择 之 前 生成 的 App ID 以 及 证 书 ， 即 可 生成 描述 文件 。 最后， 下 载 并 双 
击 描述 文件 ， 完 成 安 凌 ， 如 图 7-12 所 示 。 


Select Type Configure Generate Download | 


Your provisioning profile is ready. 


PROV 


Download and Install 
Download and double click the following file to install your Provisioning Profile， 


和 Name: Demo 
Type: iOS Distribution 
App ID: .Org.reactnative.demo 


PROV Expires: 十 月 04, 2016 


图 7-12 ”安装 界面 
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7.2.2 注册 应 用 


在 这 一 节 中 ， 我 们 注册 需要 上 架 的 应 用 。 回 到 开发 者 首页 ( 即 图 7-1 所 示 的 用 户 中 心 界面 )， 
进入 iTunes Connect 来 管理 我 们 的 应 用 发 布 。 选 择 “ 我 的 App” 后 ， 点 击 左上 角 的 添加 符号 ， 选 择 
“新 App” 项 来 新 增 一 个 应 用 ， 如 图 7-13 所 示 。 


十 ooo 


新 App 
新 建 Mac App 


新 App 套装 


图 7-13 ”添加 应 用 界面 
此 时 会 打开 应 用 信息 填写 界面 ， 如 图 7-14 所 示 。 


新 建 App 


平公 
平台 


古称 


图 7-14 ”应 用 信息 填写 界面 


先 为 应 用 填写 一 些 基本 信息 ， 如 果 不 了 解 ， 可 以 点 击 标题 后 面 的 问号 查看 。 点 击 “ 套 装 ID” 
下 拉 按 钮 ， 可 以 看 到 前 面 注册 的 App ID ,选择 对 应 的 App ID ， 然 后 点 击 “ 创 建 ”按钮 后 ， 此 时 就 
创建 好 新 的 应 用 了 。 


此 外 ， 还 要 添加 以 下 信息 。 
口 设置 价格 : 为 对 应 地 区 设置 应 用 下 载 的 价格 。 
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口 版 本 信息 : 包括 版 权 信息 、 版 本 、Icon 图 标 、 分 级 信息 、 屏 幕 快照 、 描 述 、 关 键 词 、 技 术 
支持 网 址 、 营 销 网 址 等 ， 这 些 内 容 均 会 显示 在 App Store 的 详情 中 。 

口 审核 信息 : 包括 联系 信息 、 演 示 账 户 。 审 核 相 关 的 问题 都 会 使 用 此 处 填写 的 联系 方式 。 
口 版 本 发 布设 置 : 苹果 提供 了 一 个 作业 任务 ， 人 允许 用 户 在 审核 通过 后 自动 、 手 动 以 及 定时 


口 
架 应 用 。 
App 信息 
App 信息 
绾 会 信息 
) 准备 合作 
要 装 人 D 前 新 的 加 于 1 主要 语言 
中 二 选择 简体 中 文 
您 的 客 革 ID org rcactnatve der 类 别 
SKU 效率 
体育 
人 许可 愧 议 坊 名 
分 级 


图 7-15 ”新 应 用 添加 完成 界面 

如 果 你 的 应 用 包含 一 些 内 部 购买 以 及 Game Center 的 设置 ， 也 可 以 在 这 里 进行 设置 ， 这 里 就 
不 详细 介绍 了 。 

苹果 对 于 应 用 的 审核 比较 严格 , 某 些 信息 的 缺失 将 无 法 通过 审核 , 因此 请 尽量 完整 地 完成 信 
息 的 填写 。 


7.2.3 ”上传 应 用 


设置 完 应 用 信息 后 ， 就 可 以 通过 Xcode 上 传 应 用 了 ， 上 有 具体 步骤 如 下 。 


(1) 选择 项 目 工程 ， 在 General 一 Identify 中 确保 Bundle Identifier 与 发 布 证 书 的 App ID 一 致 ， 如 
图 7-16 所 示 。 


General Capabilities Resource Tags Info Build Settings Build Phase 
PROJECT 
Y Identity 
国 RNDemo 
[ARGETS Bundle Identifier org.reactnative.demo 
A: RNDemo 
Version 2.1 
Build 200 


图 7-16 Identifier 界面 
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(2) 进入 Build Settings 一 Code Signing, 在 Code Signing Identifyd 的 Release 中 选择 对 应 的 发 布 证 
书签 名 ， 同 时 在 描述 文件 Provisioning Profile 中 选择 之 前 安装 的 文件 ， 如 图 7-17 所 示 。 


了 Code Signing 


Setting A RNDemo 
Code Signing Entitlements 
VY Code Signing Identity <Multiple values> 人 
Debug iPhone Developer 人 
Any ioS SDK 和 iPhone Developer 4 
Release iPhone Distribution: Yangzhou Yi 
Any ioSs SDK 人 iPhone Developer 4 


Code Signing Resource Rules Path 
Other Code Signing Flags 
Provisioning Profile Demo 了 


7-17 ”Code Signing 界 面 


(3) 点 击 Product 一 Archive 进 行 归档 ， 如 图 7-18 所 示 ， 然 后 就 可 以 点 击 Update to App Store... 按 
钮 来 上 传 了 ， 如 图 7-19 所 示 。 也 可 以 将 Archive 包 导出 为 Ad Hoc Deployment 后 ， 通 过 Application 
Loader 来 上 传 。 


Archive Information 


大 RNDemo 
国 |。 2015 年 10 月 5 日 下 午 7:32 


Upload to App Store... 


Validate... Export... 
Details 
Version 1.0 (1) 
Identifier org.reactnative.demo 
Type iQS App Archive 


Download dSY Ms... 


Description 


No Description 


图 7-18 ”Archive Information 界 面 
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Submitting archive to the iOS App Store: 


Uploading Archive 


sage to iTunes Connect 


Cancel 


图 7-19 ”Archive Submiting 界 面 
上 传 成 功 后， 就 可 以 将 iTunes Connect 中 的 应 用 提交 审核 了 。 当 审核 被 拒绝 的 时 候 ， 苹 果 人 


员 会 发 邮件 给 审核 信息 中 填写 的 地 址 ,描述 对 应 的 问题 。 除了 要 求 应 用 正常 运行 外 ,还 有 很 多 内 
容 以 及 政策 上 的 要 求 ， 具 体 可 以 参考 官网 的 审核 指南 。 


图 灵 社 区 会 员 蚂 蜂 (240671488@qq.com) 专 享 尊重 版 权 


图 灵 社 区 会 员 蚂 蜂 (240671488@qq.com) 专 享 尊重 版 权 


第 四 部 分 
实战 局 


口 第 8 章 企业 内 部 通讯 录 应 用 开发 
口 第 9 音 ”基于 LBS 的 应 用 开发 
口 第 10 章 豆 搜 App 
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第 GF 章 
从 业内 部 通读 如 应 用 开 友 


在 前 7 章 中 ， 我 们 学 习 了 React Native 的 语法 、 组 件 以 及 API。 在 这 一 章 中 ,我 们 将 进入 实战 
环节 ， 开 发 小 型 的 App。 进 入 一 个 新 公司 的 时 候 ， 通 常 都 会 做 的 一 件 事 就 是 加 同事 的 微 信 、 记 电 
话 号 码 。 但是, 我 们 很 少 去 添加 整个 部 门 同事 的 号 码 ， 而 仅仅 添加 自己 组 同事 的 号 码 。 现 实情 况 
却 是 悲剧 的 ， 开 个 会 需要 同 整 个 部 门 沟通 ， 此 时 才 发 现 电 话 号 码 太 少 。 因 此 ,能 否 开发 一 个 部 门 
内 部 的 App 供 大 家 使 用 呢 ? 在 这 一 章 中 ， 我 们 开发 一 款 部 门 通 讯 录 App 一 一 百灵 鸟 。 如 果 想 直接 
看 源码 ， 可 以 直接 访问 GitHub: https://github.com/vczero/React-Native-App。 


8.1 需求 提出 


手机 上 都 有 通讯 录 功 能 ， 使 用 它 可 以 发 送 短信 ， 拨 打 电话 ， 而 我 们 的 “百灵 鸟 ”App 跟 它 很 
像 。 但 是 ， 有 个 区 别 是 “百灵 鸟 ” 是 “ 云 通讯 录 "， 管 理 员 可 以 管理 联系 人 信息 ， 一 个 部 门 的 同 
事 共用 的 是 一 份 联系 人 列表 。 
在 开发 前 ， 我 们 需要 明确 这 个 App 需 要 哪些 功能 。 下 面 我 们 简单 设计 了 “百灵 鸟 ”的 功能 ; 
D 用 户 需要 登录 才能 使 用 该 App; 
D 分 组 、 分 项 目 显示 联系 人 列表 ; 
D 可 以 显示 联系 人 的 组 别 、 工 作 岗位 、 电 话 号 码 、 邮 箱 ; 
D 可 以 给 用 户 发 送 短信 、 邮 件 和 拨打 电话 ; 
D 能 够 显示 部 门 最 近 的 公告 消息 ; 
D 能 够 搜索 消息 ; 
D 用 户 能 修改 自己 的 密码 ; 
吕 每 个 用 户 都 是 一 个 管理 员 ， 可 以 增加 联系 人 、 删 除 联系 人 、 发 布 公告 ; 
D 开发 者 的 信息 ， 提 供 bug 反 馈 渠道 。 
为 了 方便 开发 ， 我 们 需要 将 以 上 功能 通过 流程 图 来 表示 ， 如 图 8-1 所 示 。 
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首页 和 一 部 门 、 项 目 组 列表 一 联系 人 列表 二 拨号 、 邮件 、 短信 


搜索 功能 


工 


关于 
下 版 本 & 反 馈 
用 户 


图 8-1 ”功能 需求 


如 图 8-1 所 示 ， 我 们 和 希望 用 户 首先 进入 的 页 面 是 部 门 、 项 目 组 列表 页 ， 点 击 茶 一 个 组 ， 就 可 
以 看 到 该 组 的 联系 人 列表 。 然 后 可 以 拨打 电话 、 发 送 邮 件 、 短 信 给 联系 人 。 我 们 同时 需要 关注 部 
门 内 部 的 动态 , 因此 可 以 查看 最 近 的 公告 和 搜索 历史 公告 。 此 外 ,还 希望 每 一 个 内 部 员工 是 管理 
者 ， 可 以 增加 联系 人 、 删 除 联系 人 、 发 布 公告 ， 同 时 可 以 修改 自己 的 密码 。 


8.2 技术 架构 


当 确 定 要 开发 一 个 应 用 的 时 候 ， 随 之 而 来 的 就 是 技术 选 型 问题 。 这 里 开发 的 “百灵 马 ” 应 用 
需要 考虑 到 现实 情况 。 一 款 内 部 App， 没 有 必要 驱动 用 户 自行 更 新 App。 如 果 按 照 版 本 更 新 ， 反 
而 会 引起 大 家 的 反感 ， 耽 误 大 家 的 时 间 。 因 此 ，Web App 和 React Native 是 最 住 选择 。 这 里 我 们 选 
择 React Native， 用 户 只 需要 安装 一 个 过 即 可 。React Native App 既 能 满足 用 户 快 速 安装 、 稳 定 体 
验 的 特性 ， 又 能 满足 我 们 频繁 更 新 通讯 录 的 需要 。 既 然 是 内 部 App， 使 用 Node.js 作 为 服务 器 端 开 
发 语言 ， 不 仅 统 一 了 开发 语言 ， 还 轻便 快速 。 
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8.1 节 已 经 提出 了 4 个 功能 需求 ， 因 此 我 们 需要 以 需求 驱动 来 完成 整个 App 的 设计 。 我 们 的 整 
体 技术 架构 如 图 8-2 所 示 。 


发 布 系统 客户 端 


| fspundle 文 件 | 


切换 线 上 bundle 版 本 


二 


| 服务 器 端 


| HTTP 服 务 | | 
| Node.js 文 件 流 | | 


! bundle 文 件 池 


图 8-2 ”整体 技术 架构 


百灵 鸟 App 整 体 分 为 3 部 分 : 客户 端 、 服 务 器 端 以 及 发 布 系统 。 客 户 端 部 分 以 React Native 
基础 组 件 为 基础 ， 开 发 联系 人 、 人 公告、 管理 等 功能 。 客 户 端 调用 的 数据 由 Node.js 服 务 器 端 提供 。 
React Native jsbundle 文 件 由 发 布 系 统 提 供 。 之 所 以 将 后 端 和 发 布 系 统 独 立 ， 是 因为 二 者 更 新 频 
度 不 一 样 ， 所 具有 的 功能 不 一 样 。 服 务 器 端 我 们 采用 了 Node.js 语 言 ， 将 联系 人 数据 、 公 告 等 数 
据 都 存 人 服务 器 端 .json 文 件 中 ， 通 过 Node.js 文 件 流 进行 数据 的 存储 、 删 除 、 增 加 等 操作 。 整 个 
服务 器 端 是 一 个 轻 量 级 的 文件 系统 ,暴露 对 文件 内 容 修 改 的 API。 发 布 系统 是 为 了 独立 发 布 , 而 
不 用 跟 服务 器 端 混 在 一 块 ， 也 没有 必要 混在 一 块 。 服 务 器 端 需要 经 常 修改 ， 但 是 发 布 系统 往往 
比较 稳定 。 我 们 在 发 布 系统 上 选择 一 个 版 本 ， 对 应 的 App 端 就 会 更 新 内 容 。 关 于 App 的 更 新 ， 可 
以 参考 第 7 章 。 关 于 jsbundle 的 更 新 ， 可 以 参考 http://github.com/vczero/jsbundle, 该 项 目 是 一 个 简 
易 的 jsbundle 更 新 系统 。 
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百灵 鸟 是 一 个 小 型 通讯 录 App， 我 们 没有 必要 把 许多 重 武器 加 进去 。 我 们 不 需要 对 用 户 的 数 
据 进行 缓存 ,也 没有 必要 为 此 添加 一 个 数据 库 。 为 了 快速 实现 高 效 开 发 ， 这 里 用 的 是 基于 文件 系 
统 的 服务 。 也 就 是 说 ， 所 有 的 通讯 录 信 息 都 存在 文件 中 。 毕 竟 一 个 部 门 的 通讯 录 信息 比较 少 , 也 
不 是 高 频 应 用 。 
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8.3.1 服务 器 端 整体 设计 


很 多 时 候 , 我 们 都 有 一 个 误区 , 那 就 是 什么 技术 高 大 上 就 用 什么 技术 ， 而 不 考虑 应 用 的 场景 
和 团队 的 配置 。 百灵 鸟 App 有 必要 使 用 数据 库 吗 ? 我 的 答案 是 没有 太 大 必要 。 因为 一 个 部 门 就 100 
人 左右 , 用户 的 信息 也 就 100 条 记录 。 完 全 没 必要 使 用 MySQL 或 者 MongoDB。 大 家 都 知道 服务 器 
的 内 存 是 十 分 宝贵 的 。 如 果 为 了 百 来 条 记录 开启 一 个 数据 库 的 服务 器 , 那 是 对 服务 器 内 存 极 大 的 
浪费 。 比 如 ，MongoDB 数 据 库 服务 启动 后 ， 立 马 就 损失 了 上 百 兆 的 内 存 。 那 么 ， 又 有 一 个 问题 ， 
那 就 是 有 没有 必要 使 用 缓存 ”我 觉得 没有 必要 。 因 为 这 是 低频 度 的 App， 没 有 必要 为 用 户 数据 做 
缓存 。 例 如 ， 如 果 增 加 Redis 缓 存 ， 那 么 就 需要 维护 缓存 规则 和 命中 条 件 。 针 对 百灵 乌 这 球 App 
而 言 ， 这 是 对 人 力 的 浪费 。 针 对 百 来 条 记录 ， 我 们 宁愿 一 次 性 添加 到 内 存 中 ， 那 样 更 快 。 因 此 ， 
服务 器 端 就 是 将 所 有 数据 都 存储 到 ,json 格 式 的 文件 中 , 所 有 的 数据 增加 、 删 除 、 更 新 都 是 基于 文 
件 系统 的 。 对 于 后 期 维护 而 言 ， 可 以 减少 很 多 不 必要 的 麻烦 。 如 果 和 需要 进行 服务 迁移 ， 也 会 十 分 
便利 。 后 端的 总 体 设 计 如 图 8-3 所 示 。 


:局域网 


Le Ca 
调用 “一 路 由 |; | 后 端 请 求 ; 

一 一 一 一 >， nginx = node server 2 1 一 一 > ， USer.]jSOn 1 

公 网 IP ， 内 网 IP ”， 文件 1/0 ， | 

开发 者 : ' : 


pm2 多 核 
图 8-3 ”服务 器 端 设计 
如 图 8-3 所 示 ， 我 们 将 Node.js 服 务 和 后 端 服务 都 部 署 在 同一 个 局 域 网 内 。 这 样 的 话 ， 网 络 请 
求 的 数据 将 会 很 快 。 比 如 , 我 们 需要 调用 公司 OA 系统 进行 登录 验证 。 图 中 userjson 是 用 户 的 数据 
文件 ，message.json 是 公告 消息 的 数据 文件 。 


8.3.2 用户 数据 模型 设计 

我 们 没有 使 用 数据 库 ， 使 用 的 是 文件 存储 。 这 里 使 用 的 是 json 文件 ， 其 好 处 就 是 JSON 对 象 
的 转化 、 存 取 十 分 方便 。 根 据 8.1 节 的 需求 ， 我 们 需要 存储 用 户 的 姓名 、 加 密 密 码 、 组 别 、 电 话 、 
邮箱 、 标 签 等 信息 。 因 此 ， 我 们 设计 如 下 数据 模型 ( 单个 员工 信息 ): 


{ 
"userid": "591F68A5-87E6-4A6C-810F-5A50953AE747"， 
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"Username": “宋江 ， 

"password": "19bdec7440acd44c669240ed534fc2f6"， 

"partment": "框架 研发 "， 

"tel": “19008097890 ， 

"email": "test@126.com", 

"tag": “研发 ， 

"creater": "wlh", 

"token": "5C391E50-C160-4AFA-A4D5-19B315F5D357C34COB51-3A68-4297-9C7E-A851B136D34F" 


} 
在 上 述 代 码 中 ， 各 个 属性 的 含义 如 下 所 示 。 


D userid: 员工 的 唯一 标识 ， 便 于 我 们 删除 用 户 。 

口 username: 用 户 名 。 

口 password: 加 密 后 的 密码 。 

D partment: 部 门 或 者 组 别 。 

口 tel: 员工 电话 。 

口 email: 员工 邮箱 。 

D tag: 标识 员工 序列 ， 例 如 研发 、 产 品 。 

口 creater: 创建 者 ， 该 员工 由 谁 添加 。 

口 token: 该 员工 的 token， 通 过 登录 来 换取 新 的 token。token 是 权限 的 唯一 标识 。 


既然 设计 好 了 员工 模型 ， 那 么 整个 userjson 应 该 是 一 个 数组 。 该 数组 包含 多 个 用 户 模型 。 
userjson 文 件 的 内 容 如 下 : 


[ 
{ 

"userid": "591F68A5-87E6-4A6C-810F-5A50953AE747", 
"username": "宋江 "， 
"password": "19bdec7440acd44c669240ed534fc2f6"， 
"partment": "框架 研发 "， 
"tel": "19008097890", 
"email": "test@126.com", 
"tag": “研发 ， 
"creater": "wlh", 
"token": "5C391E50-C160-4AFA-A4D5-19B315F5D357C34COB51-3A68-4297-9C7E-A851B136D34F" 


"userid": "6998EED4-BB29-469E-B19A-DF4171B1FD12"， 
"username":" 卢 俊 义 "， 

"password": "19bdec7440acd44c669240ed534fc2f6"， 
"partment": “监控 研发 "， 

"tel": "19008097890", 

"email": "test@126.com", 

"tag": “研发 ， 

"creater": "wlh", 

"time": "2015-07-14T05:48:56.1922", 

"token": "COB668AB-A030-4A35-8A3C-422DEF4F9BE2undefined" 
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{ 
"userid": "3240870A-538F-4A84-BOOE-567E910A30ED"， 
"username": " 吴 用 "， 

"password": "91266e54a7d08e3df4b26839ee946628"， 

"partment": "框架 产品 "， 

"tel": "19008097890", 

"email": "test@126.com", 

"tag": "产品 "， 

"creater": "wlh", 

"time": "2015-07-14T09:18:59.1742"， 

"token": "7722D6B3-8ACF-4C9B-8677-3326C14B7D9E5839849B-97AB-443D-B083-4236E550FAD2" 


} 
] 


我 们 为 每 一 个 员工 模型 增加 creater 字 段 是 十 分 必要 的 。 因 为 我 们 App 的 权限 是 公开 的 ,内 部 
员工 都 能 对 数据 进行 修改 ,我们 相信 员工 可 以 做 到 准确 无 误 , 但 是 做 数据 日 志 记 录 是 必要 的 。 用 
户 的 密码 一 定 要 加 密 加 盐 处 理 ， 这 是 对 用 户 的 保障 。token 的 换取 也 要 做 到 安全 、 可 控 。 


8.3.3 公告 数据 模型 设计 


我 们 需要 的 不 仅仅 是 通讯 录 功 能 ,更 希望 可 以 发 表 一 些 状 态 信息 。 比 如 有 新 员工 加 入 时 ,可 
以 在 公告 里 发 表 “ 欢 迎 致辞 "。 因 此 ， 我 们 需要 设计 公告 的 数据 模型 ， 其 中 应 该 包含 用 户 名 、 用 
户 ID 、 发 表 时 间 、 消 息 内 容 等 字段 。 

根据 公告 数据 模型 ， 我 们 的 message.json 文 件 应 该 是 一 个 数组 ， 该 数组 包含 多 个 消息 模型 ， 
其 内 容 如 下 : 


[ 
{ 
"messageid": "3", 
"userid": "112222", 
"time": "2015-05-03", 
"username":" 王 **" 
"message": "欢迎 小 放 同 学 加 入 携程 框架 部 " 


"messageid": "4", 
"userid": "112222", 
"time": "2015-05-03", 
"username":" 魏 **"， 
"message": "moles 项 目 组 周末 一 起 去 团 建 喘 。" 
} 
] 


在 上 述 代码 中 ， 消 息 模型 中 的 各 个 字段 解释 如 下 。 
口 messageid: 消息 的 ID。 

口 userid: 用 户 ID。 

D time: 时 间 字 符 串 ， 格 式 为 yyyy-MM-dd。 
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口 username: 用 户 名 。 
口 message: 消息 内 容 。 


8.3.4 服务 路 由 设计 


此 外 , 我 们 还 希望 从 一 个 路 由 的 URL 串 中 看 出 该 服务 是 干什么 的 ,此 时 设计 一 套 良好 的 服务 
API 是 必要 的 。 因 为 “百灵 鸟 ”App 的 功能 比较 少 ， 所 以 这 里 设计 的 API 比 较 简 单 。 如 果 是 大 型 的 
服务 器 端 ， 可 以 参考 RESTful 风 格 设计 API。 我 们 设计 的 API URL 如 下 : 


//user API 
// 获 取 用 户 信 息 


app.post('/user/get', this.getUser); 

// 创 建 用 户 

app.post('/user/create', this.addUser); 

// 登 录 

app.post('/user/login', this.1ogin); 

// 通 过 token 登 录 

app.post('/user/login/token', this.loginByToken); 
// 更 新 密码 

app.post('/user/password/update', this.updatePassword); 
// 删 除 用 户 

app.post('/user/delete', this.deleteUser); 
//message API 

// 获 取 公告 

app.post('/message/get', this.getMessage); 


这 里 我 们 统一 使 用 POST 请 求 , 当然 也 可 以 采用 GET 请 求 , 比如 获取 用 户 信息 时 可 以 使 用 GET 
请 求 o 


8.3.5 创建 项 目 


后 端的 设计 基本 完成 了 ， 有 具体 细节 将 会 在 开发 中 讲解 ， 比 如 登录 鉴 权 认证 。 在 这 一 节 中 , 我 
们 开始 搭建 服务 器 端的 项 目 。 服 务 器 端 使 用 的 是 Node.js 平 台 , 使 用 的 框架 是 express。 我 们 按照 以 
下 步骤 来 完成 项 目的 搭建 ( 前 提 是 已 经 安装 好 了 Nodejs )。 

1. 创建 项 目 

我 们 使 用 express 创 建 项 目 ， 终端 命 令 如 下 : 

$ npm install -g express 


$ npm install -g express-generator@4 
$ express -e server 


2. 搭建 目录 结构 
良好 的 目录 结构 便于 我 们 开发 和 管理 项 目 ， 这 里 搭建 的 目录 结构 如 图 8-4 所 示 。 
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vv 


vv 


了 Dserver 


口 bin 
Ddatabase 
jn message.json 
Js0n user.json 
四 node_modules 
四 pubilic 
四 routes 
了 Dservices 
区 message.js 
区 User.js 
区 routes.js 
划 utiljs 
四 views 
国 appjs 
Is package.json 
LI service.md 


图 8-4 ”目录 结构 
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在 server 下 , 我 们 新 建 了 database 目 录 , 其 中 新 建 了 两 个 .json 文 件 。message.json 是 存储 公告 信 
息 的 文件 ， 其 内 容 目 前 是 空 数组 ， 即 [ ]。userjson 是 员工 信息 存储 文件 ， 其 内 容 目 前 是 空 数 组 ， 
即 [ ]。routes 是 我 们 关注 的 路 由 服务 目录 。utiljs 模 块 包含 一 些 工具 方法 ,例如 加 密 和 GUID 的 生 
成 等 。routesjs 是 路 由 加 载 模 块 ， 主 要 将 所 有 的 模块 统一 加 载 到 内 存 中 。 


3. 安装 依赖 


创建 完 项 目 后 , 我 们 需要 安装 相关 的 依赖 。package.json 文 件 中 的 dependencies 是 我 们 需要 的 


库 ， 相 关 代码 如 下 : 
{ 


"name": "server", 

"version": "0.0.0", 

"private": true, 

"scripts": { 
"start": "node ./bin/www" 

】， 

"dependencies": { 
"async": "^1.3.0", 
"body-parser": "~1.12.0", 
"cookie-parser": "~1.3.4", 
“debUge Ss "2 3161 
"EJS T2301 
"express": "~4.12.0", 
"morgan™: "~1.5.1", 
"serve-favicon": "~2.2.0", 
"supervisor": "^0.7.1", 
JX: AOS 

} 

} 


然后 在 server 目 录 下 执行 如 下 命令 即 可 安装 依赖 : 


$ npm install 
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8.3.6 appjs 入 口 文件 
这 里 我 们 将 appjs 作 为 入 口 文件 。 因 此 ， 修 改 后 的 appjs 文 件 的 内 容 如 下 : 


var express = require('express'); 

var http = require('http'); 

var path = require('path'); 

var favicon = require('serve-favicon'); 

var logger = require('morgan'); 

var cookieparser = require('cookie-parser'); 
var bodyParser = require('body-parser'); 

var async = require('async'); 

var routes = require('./routes/routes'); 

var app = express(); 


app.set('port', 3000); 
app.set('views', path.join( dirname, 'views')); 
app.set('view engine', 'ejs'); 


app.use(favicon( dirname + '/public/favicon.ico')); 
app.use(logger('dev')); 

app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ extended: true })); 
app.use(cookieparser()); 
app.use(express.static(path.join( dirname, 'public'))); 


Var server = http.createServer(app); 
server.listen(app.get('port' 


) 


Ps 


server.on('listening', function(){ 
console.log('---listening on port: 


D3 


1 


+ app.get( "port ' ) +'---'); 


server.on('error', function(error){ 
switch (error.code) { 
case 'EACCES': 
console.error(bind + ' 需 要 权限 许可 '); 
process.exit(1); 
break; 
case 'EADDRINUSE': 
console.error(bind +“ 痛 口 已 被 占用 '); 
process.exit(1); 
break; 
default: 
throw error; 
} 


})); 


// 加 载 路 由 
async.waterfall([ 
function(callback){ 
routes(app); 
callback(null); 
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}, 
function(){ 
app.use(function(req, res, next) { 
var err = new Error('Not Found'); 
err.status = 404; 
next (err); 
]); 
if (app.get('env') === 'development') { 
app.use(function(err, req, res, next) { 


res.status(err.status || 500); 

res.render('404/error', { 
message: err.message, 

error: err 


app.use(function(err, req, res, next) { 
res.status(err.status || 500); 
res.render('404/error', { 
message: err.message, 
error: {} 


]); 


我 们 在 app.jjs 文 件 中 加 载 了 require('./routes/routes') 模 块 ， 并 日 将 express 的 实例 作为 参数 
传人 了 routes(app)。 前 面 我 们 已 经 提 到 ，routes 模 块 的 功能 是 将 所 有 的 服务 加 载 到 内 存 中 。 


8.3.7 ”加 载 服务 模块 到 内 存 
server/routes/routes.js 文 件 十 分 重要 ， 通 过 它 来 加 载 服 务 模块 ， 其 代码 如 下 : 


var fs = require("fs"); 


module.exports = function(app){ 
var FS_PATH SERVICES = './routes/services/'; 
Var REQUIRE PATH SERVICES = './services/'; 


fs.readdir(FS PATH SERVICES, function(err, list){ 
if(err){ 
throw' 没 有 找到 该 文件 夹 ， 请 检查 …… 
} 
for (var e; list.length 8& (e = list.shift());){ 
var service = require(REQUIRE PATH SERVICES + e); 
service.init && service.init(app); 


}); 
六 
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我 们 使 用 require 加 载 了 server/routes/services/ 目 录 下 的 所 有 模块 。 并 且 调 用 每 个 模块 的 init 
方法 。 这 样 做 的 一 个 好 人 处 是 可 以 将 对 象 封 装 。 例 如 ， 我 们 可 以 添加 test.js。init 函 数 可 以 使 用 app 
参数 挂 载 路 由 ， 所 有 的 请 求 路 由 都 集中 在 该 函数 中 。 这 样 做 的 好 处 是 , 一 个 模块 的 路 由 和 功能 都 
在 一 个 文件 中 ,便于 管理 和 维护 。test.js 文 件 的 内 容 如 下 : 

var Test = { 

init: function(app){ 


app.get('/test/test', this.doTest); 
app.get('/test/show', this.doShow); 


》 


doTest: function(req, res){ 
res.send({ 
status: 1， 
info: “测试 服务 doTest 
]); 
)， 


doShow: function(req, res){ 
res.json({ 
status: 1， 
info: “测试 服务 doShow' 
)); 
} 
}; 


module.exports = Test; 

我 们 可 以 给 messagejs 和 userjs 写 个 简单 模块 ， 然 后 使 用 node app.js 启 动 服务 ， 此 时 便 可 以 看 
到 服务 返回 的 数据 了 。 例 如 ， 通 过 浏览 器 访问 http:Wlocalhost:3000/Mestshow， 可 以 得 到 如 下 结果 : 

{"status":1,"info":" 测 试 服务 doShow"} 


这 说 明 我 们 的 服务 模块 加 载 成 功 。 


8.3.8 工具 类 开发 


我 们 已 经 打通 了 服务 模块 的 加 载 流 程 ， 现 在 需要 提前 开发 一 些 工具 方法 。 我 们 在 util.js 文 件 
中 增加 如 下 代码 : 


var crypto = require('crypto'); 
module.exports = { 
guid: function() { 
return “XXXXXXXX-XXXX-4XXX-yXXX-XXXXXXXXXxXxXxX" .replace(/[xy]/g, function(c) { 
var r = Math.random() * 16 | 0， 
V=CcC== 'x' ?I: (r& ox3 | Ox8); 
return v.toString(16); 
}) .toUpperCase(); 
)， 
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md5: function(password){ 
var md5 = crypto.createHash('md5'); 
var salt = '(!%$88hs@gophs*)#sassb9'; 
var newPwd = md5.update(password + salt).digest('hex'); 
return newPwd ; 


}, 


getKey: function(){ 
return 'HSHHSGSGGSTWSYWSYUSUWSHWBS-REACT-NATIVE'; 


} 
点 
该 工具 类 主要 有 3 个 因数 : guid 用 于 生成 随机 ID ( 源 自 Robert Kieffer )，md5 因 数 主要 用 于 加 
密 用 户 密码 ，getKey 用 于 返回 鉴 权 key 值 。 


8.3.9 ”用 户 信息 接口 


我 们 已 经 开发 好 了 routes 模 块 加 载 器 ， 同 时 也 开发 好 了 工具 类 ， 下 一 步 就 是 实现 服务 。 我 们 
在 serverroutes/services/userjs 文 件 中 开发 用 户 信息 相关 的 服务 。 

1. 获取 用 户 信息 

在 in 让 函数 中 增加 路 由 app.post('/user/get', this.getUser)。getUser 是 获取 信息 服务 ， 这 
里 需要 传人 使 用 鉴 权 key 和 部 门 ， 才 能 查询 出 数据 。 这 里 ,我们 读 取 的 是 userjson 文 件 。 当 查询 到 
符合 条 件 的 数据 时 ， 我 们 删除 密码 并 返回 数据 。 

2. 添加 用 户 

在 init 了 水 数 中 增加 路 由 app.post('/user/create' ，this.addUser)， 其 中 addUser 是 增加 用 户 
服务 。 我 们 需要 传人 用 户 名 、 密 码 、 电 话 、 邮 箱 、 部 门 组 别 、 标 签 ( 产品 、 研 发 和 测试 )、 添 加 
者 等 信息 才能 构建 一 个 完成 的 用 户 对 象 ,首先 , 我们 从 userjson 中 读 取 数据 并 序列 化 成 JSON 对 和 象 ， 
然后 在 JSON 对 象 上 推送 数据 。 

3. 用 户 登录 

在 in 让 函数 中 增加 路 由 app.post('/user/login', this.login)， 其 中 login 是 登录 服务 ， 该 服 
务 需 要 传人 用 户 的 邮箱 、 密 码 和 设备 ID 。 我 们 使 用 工具 类 的 guid 方 法 和 设备 ID 生成 了 token。 这 
里 需要 删除 密码 并 返回 该 用 户 相关 的 数据 。 

4. 使 用 token 登 录 

在 init 函 数 中 增加 路 由 app.post('/user/login/token'，this.loginByToken)， 其 中 loginBy 
Token 是 根据 token 登 录 的 服务 。 

5. 更 新 用 户 密码 

在 init 函 数 中 增加 路 由 app.post('/user/password/update'，this.updatePassword) ， 其 中 
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updatePassword 是 更 新 密码 服务 。 

6. 删除 用 户 服务 

在 init 函 数 中 增加 路 由 app.post('/user/delete', this.deleteUser), 其 中 deleteUser 是 删除 
用 户 服务 。 需 要 传人 的 参数 是 被 删除 者 的 邮箱 和 删除 者 的 token。 

userjs 文 件 的 完整 代码 如 下 所 示 : 


var fs = require('fs'); 
var util = require('./../util'); 
Var USER PATH = './database/user.json’'; 


var User = { 


init: function(app){ 
app.post('/user/get', this.getUser); 
app.post('/user/create', this.addUser); 
app.post('/user/login', this.1ogin); 
app.post('/user/login/token', this.1loginByToken); 
app.post('/user/password/update', this.updatePpassword); 
app.post('/user/delete', this.deleteUser); 

外 


// 获 取 用 户 信 息 
getUser: function(req, res) 
var key = req.param('key’ 
var partment = req.param( 
if(key !== util.getkKey()){ 
return res.send({ 
status: 0， 
data: ' 使 用 了 没有 鉴 权 的 key 
]); 
fs.readFile 
if(lerr){ 
try{ 
var obj = JSON.parse(data); 
var new0bj = []; 
for(var i in obj){ 
if(obj[i].partment === partment){ 
delete obj[il]['password']; 
new0bj .push(obj[i]); 


{ 
); 


partment' ); 


一 


USER PATH, function(err, data){ 


} 

return res.send({ 
status: 1， 
data: newObj 

)); 

}catch(e){ 

return res.send({ 
status: 0， 
err: e 

)); 
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BE 
} 


return res.send({ 
status: 0， 
err: err 


// 添 加 用 户 
addUser: function(req, res){ 
var username = req.param('username'); 
var password = util.md5(req.param('password' )); 
var tel = req.param('tel'); 
var email = req.param('email'); 
var partment = req.param('partment'); 
var tag = req.param('tag'); 


var creater = req.param('creater') || "'; 
if(!lusername || !password || !tel || !email || !partment || !tag || !creater){ 
return res.send({ 
status: 0， 
data: “缺少 必要 参数 ， 
]); 
} 
try{ 
var content = JSON.parse(fs.readFileSync(USER PATH)); 
var obj = { 


"userid": util.guid()， 
"username": username, 
"password": password, 
"partment": partment, 


"tel": tel, 
"email": email, 
"tag": tag, 


"creater": creater, 
"time": new Date()， 
"token : 一 
}; 
content.push(obj); 
// 更 新 文件 
fs.writeFileSync(USER PATH, JSON.stringify(content)); 
delete obj.password; 
return res.send({ 
status: 1， 
data: obj 
}); 
}catch(e){ 
return res.send({ 
status: 0， 
err: e 
]); 
} 
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)， 
// 用 户 登 录 
login: function(req, res){ 
Var email = req.param('email'); 
var password = util.md5(req.param('password' )); 
var deviceld = req.param('deviceld'); 
var token = util.guid() + deviceId; 
var content = JSON.parse(fs.readFileSync(USER PATH).toString()); 
for(var i in content){ 
// 验 证 通过 
if(content[i].email === email 8& content[i].password === 
content[i]['token'] = token; 
// 写 入 到 文件 中 
console.log(content[i]); 
fs.writeFileSync(USER PATH, JSON.stringify(content)); 
// 删 除 密码 
delete content[i].password; 
return res.send({ 
status: 1， 
data: content[i] 
]); 
} 
} 
return res.send({ 
status: 0， 
data: "用户 名 或 者 密码 错误 ' 
)); 
)， 
// 通 过 token 登 录 
loginByToken: function(req, res){ 


var token = req.param 


'token' ); 


var content = JSON.parse(fs.readFileSync(USER PATH)); 
for(var i in content){ 
if(token === content[i].token){ 


delete content[i] 


.password; 


return res.send({ 
status:1, 
data: content[i 
]); 
} 


return res.send({ 
status: 0， 

info: 'token 失 效 ' 

)); 

)， 


// 用 户 修 改 密码 
updatePassword: function(req, res){ 
var token = req.param('token'); 
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var 01dPassword = util.md5(req.param('oldPassword' )); 
var password = util.md5(req.param('password' )); 


var content = JSON.parse(fs.readFileSync(USER_ PATH)); 
for(var i in content){ 
if(token === content[i].token 8& oldPassword === content[i].password){ 
content[i].password = password; 
// 写 入 到 文件 中 
fs.writeFileSync(USER PATH, JSON.stringify(content)); 
return res.send({ 
status: 1， 
data: ' 更 新 成 功 ' 
)); 
} 
} 


return res.send({ 

status: 0， 
data: ' 更 新 失败 ， 没 有 找到 该 用 户 或 者 初始 密码 错误 ' 
]); 
}, 


// 删 除 用 户 

deleteUser: function(req, res) { 
var token = req.param('token’'); 
var email = req.param('email'); 


var content = JSON.parse(fs.readFileSync(USER PATH)); 

for (var i in content) { 

if (token === content[il].token) { 
// 遍 历 查找 需要 删除 的 用 户 

for (var j in content) { 

if (content[j].email = 

) 


// 写 入 到 文件 中 
fs.writeFileSync(USER PATH, JSON.stringify(content)); 
return res.send({ 

status: 1， 

info: content, 
data: “删除 成 功 ' 
]); 
} 


} 
} 


return res.send({ 
status: 0， 
err: ' 删 除 失 败 ， 没 有 找到 该 用 户 或 者 用 户 鉴 权 错 误 ' 
}); 
} 
}; 


module.exports = User; 
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8.3.10 ”公告 消息 接口 


我 们 在 server/routes/services/message.js 文 件 中 添加 如 下 代码 : 


var fs = require('fs'); 

var util = require('./../util'); 

Var MESSAGE PATH = './database/message.json’'; 
Var USER PATH = './database/user.json’'; 


var Message = { 
init: function(app){ 
app.post('/message/get', this.getMessage); 
app.post('/message/add', this.addMessage); 


2 


// 获 取 公 告 消息 
getMessage: function(req, res){ 
var key = req.param('key'); 
if(key !== util.getKkey()){ 
return res.send({ 


status: 0， 
data: ' 使 用 了 没有 鉴 权 的 Key' 
}); 
fs.readFile(MESSAGE PATH, function(err, data){ 
if(lerr){ 
try{ 
var obj = JSON.parse(data); 
return res.send({ 
status: 1， 
data: obj 
)); 
}catch(e){ 
return res.send({ 
status: 0， 
err: e 
)); 
} 
} 
return res.send({ 
status: 0， 
err: err 


// 增 加 公告 消息 
addMessage: function(req, res){ 
var token = req.param('token'); 
Var message = req.param('message'); 
if(!token || !message){ 
return res.send({ 
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status: 0， 
err: “token 或 者 message 不 能 为 空 ' 
)); 


} 
// 根 据 token 查 询 
fs.readFile(USER PATH, function(err, data){ 
if(err){ 
return res.send({ 

status: 0， 
err: err 
]); 
} 


try{ 
var obj = JSON.parse(data); 
for(var i in obj){ 
if(obj[i].token === token){ 
// 增 加 信息 
var msg0bj = JSON.parse(fs.readFileSync(MESSAGE PATH)); 
msg0bj.push({ 
messageid: util.guid(), 
userid: obj[i].userid, 
username: obj[i].username, 
time: new Date().getFullYear() + '-" 
+ (parseInt(new Date().getMonth()) + 1) + '-' + new Date().getDate(), 
message: message 


]); 


fs.writeFileSync(MESSAGE PATH, JSON.stringify(msg0bj)); 
return res.send({ 


status: 1 
)); 
} 
} 
return res.send({ 
status: 0， 
err: 'token 认 证 失败 ' 
D); 
}catch(e){ 
return res.send({ 
status: 0， 
err: e 
D); 
} 
D); 


module.exports = Message; 


在 上 述 代码 中 ，getMessage 方 法 用 于 获取 message.json 文 件 中 的 数据 ，addMessage 方 法 用 于 向 
message.json 文 件 中 增加 数据 。 


图 灵 社 区 会 员 蚂 蜂 (240671488@qq.com) 专 享 尊重 版 权 


272 区 第 8 章 企业 内 部 通讯 录 应 用 开发 


8.3.11 建议 
这 里 服务 器 端的 代码 只 是 作为 实例 ， 还 有 很 多 需要 完善 的 地 方 ， 例 如 : 
口 增加 XSS 过 滤 ， 防 止 恶 意 表单 ; 
口 增加 鉴 权 认证 ， 保 证 数据 接口 安全 ; 
口 增加 日 志 ， 记 录用 户 登 录 和 使 用 情况 ; 
D 增加 返回 结果 条 数控 制 等 。 
服务 器 端的 代码 托管 在 GitHub 上 ( 详 见 https:/Wgithub.com/vczero/React-Native-App/tree/ 
master/address_book/server )， 欢 迎 大 家 完善 代码 。 


8.4 客户 端 设计 和 开发 
现在 ， 我 们 需要 开发 React Native iOS 客 户 端 。 


8.4.1 客户 庙 设 计 

关于 客户 端的 开发 ， 我 们 采用 的 是 React Native 技 术 。React Native 提 倡 的 是 组 件 化 ， 因 此 ， 
我 们 需要 重点 考虑 组 件 的 颗粒 度 。 比 如 有 人 将 登录 页 面 作为 一 个 组 件 , 他 的 理由 是 整个 登录 页 面 
是 唯一 的 ,其 他 组 件 只 是 调用 登录 页 面 而 已 。 而 有 的 人 将 input 和 输入 框 单独 出 一 个 组 件 , 他 认为 搜 
索 输 入 框 、 登 录 输 入 框 都 是 同一 类 。 这 里 ， 我 更 倾向 于 前 者 ， 因 为 基于 业务 的 组 件 跟 业 务 绑 在 一 
块 更 好 ， 方 便 后 期 代码 的 更 新 和 维护 。 

1. 客户 端 总 体 设 计 

其 实 每 一 个 功能 都 有 很 多 技术 方向 的 选择 ， 但 是 选择 最 贴 合 当前 条 件 和 应 用 的 才 是 最 好 的 。 
比如 ， 有 时 候 为 了 实现 一 个 “加 入 购物 车 ”的 动画 特效 ， 去 加 载 一 个 动画 库 是 不 值得 的 。 如 果 整 
个 App 有 十 多 处 动画 ， 并 且 对 动画 要 求 较 高 ， 但 是 又 没有 时 间 去 实现 一 套 动画 ， 那 么 加 载 开 源 的 
动画 库 是 个 明智 的 选择 。 这 里 ， 百 灵 乌 是 一 个 简单 的 App， 我 们 需要 做 到 的 是 信息 正确 。 客 户 端 
整体 设计 如 图 8-5 所 示 。 
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图 8-5 ”客户 端 总 体 设计 


可 以 看 出 ， 路 由 的 深度 是 2， 所 以 对 用 户 来 说 ， 很 容易 操作 。TabBarIOS 中 设置 4 个 选项 卡 ， 
每 个 选项 卡 都 是 独立 的 NavigatorIOS。 也 就 是 说 ， 每 个 功能 模块 独立 路 由 。 


2. 目录 结构 
整个 客户 端的 设计 已 经 做 好 ， 现 在 我 们 需要 规划 开发 目录 ， 如 图 8-6 所 示 。 


了 Daddress_ book (~/work/github/Rea 
Daddress_book.xcodeproj 

四 address_bookTests 

口 iOS 

Dnode_modules (library home) 
四 server 


增删 改 查 
管理 功能 项 | 一 一 一 >| 表 4 


WebView 展 示 


vy vy vy vv 


Dviews 
了 Dabout 
EE webview.js 
了 Dhome 
国 addressjs 
区 itemblock.js 
了 Dmanager 
咏 addUser.js 
Iws deleteUser.js 
|S modifyPassword.js 
匡 postMessage.js 
了 Dmessage 
区 detailjs 
国 itemjjs 
sabout.js 
Ws home.js 
login.js 
ws manager.js 
型 message.js 
西 service.js 


lw util.js 
目 .fowconfig 
今 .gitignore 
MN .npmignore 
范 index.ios.js 
yo package.json 


图 8-6 ”开发 目录 
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在 开发 目录 中 ，index.ios.js 是 客户 端 程序 的 入口 文件 ，address_book/views 是 所 有 组 件 存放 目 
录 。 各 文件 的 含义 如 图 8-7 所 示 。 
index.ios.js 入 口 文 件 
Views 所 有 组 件 存放 目录 
utiljs 工 具 组 件 
Service.js 服 务 接口 
login.js 登 录入 口 组 件 
home.js 联 系 人 入 口 组 件 
中 
1 告 和 人 口 组 件 加 载 相应 文件 夹 组 件 
manager.js 管 理 入 口 组 件 
about.js 关 于 入 口 组 件 
home 联 系 人 组 件 目 录 
message 公 告 组 件 目录 


manager 管 理 组 件 目录 
about 关 于 组 件 目录 


图 8-7 组 件 


8.4.2 ”工具 组 件 和 服务 
utiljs 文 件 是 工具 模块 ， 封 装 了 获取 屏幕 尺寸 和 POST 请 求 ， 具 体 的 代码 如 下 : 


var React = require('react-native'); 
var Dimensions = require('Dimensions'); 


var { 
PixelRatio 
} = React; 


var Util = { 


// 单 位 像素 
pixel: 1 / PixelRatio.get(), 
// 屏 幕 尺寸 
size: { 
width: Dimensions.get('window' ).width, 
height: Dimensions.get('window').height 
外 


//POST 请 求 
post: function (url, data, callback) { 
var fetchOptions = { 
method: 'POST', 
headers: { 
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'Accept': “application/json ， 

'Content-Type': "application/json 
外 
body: JSON.stringify(data) 


了》 


fetch(url, fetchoptions) 
.then((response) => response.text()) 
.then((responseText) => { 
callback(JSON.parse(responseText)); 
]); 
}, 
//key 

key: 'HSHHSGSGGSTWSYWSYUSUWSHWBS-REACT-NATIVE" 


}; 


module.exports = Util; 


这 里 我 们 引用 了 Dimensions API 来 获取 屏幕 的 宽度 和 高 度 ， 使 用 PixelRatio.get() 来 获取 屏 
幕 像素 比 ， 同 时 将 fetch 方 法 封装 成 了 post 方 法 ， 便 于 我 们 发 出 POST 请 求 。 


为 了 更 好 地 管理 服务 的 URL， 我 们 将 服务 URL 都 集中 到 一 个 文件 中 ， 即 service.js， 该 文件 的 
内 容 如 下 : 


var Service = { 
host: http://127.0.0.1:3000 ， 
login: '/user/login', 
loginByToken: '/user/login/token', 
getUser: '/user/get', 
createUser: '/user/create', 
getMessage: '/message/get', 
addMessage: '/message/add', 
updatePassword: '/user/password/update', 
deleteUser: '/user/delete' 


}; 


module.exports = Service; 


这 样 ， 我 们 只 用 修改 host 就 可 以 打包 生产 了 。 


8.4.3 添加 依赖 库 


我 们 的 项 目 需 要 获取 设备 的 ID ， 因 此 需要 加 载 RCTAdSupport 项 目 。 右 击 Libraries， 选 择 Add 
Files to "address_book"...， 如 图 8-8 所 示 。 
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address_book 
Y 国 2targets i0S SDK 8.4 六 | 癌 General Capabilities Info 
™ Ml address_book PROJECT + 
_) main.jsbundle address_book 
* Target Dependencies (0 items) 
TARGETS 
从 address book » Compile Sources (2 items) 
OO address_bookTests 
了 Link Binary With Libraries (10 items) 
Name 
加 React.xcodeproj Show in Finder By lbReact.a 
”加 1 target, iOS SDK 84 Open with External Editor 甩 libRCTActionSheet.a 
> 四 Ps iOS SDK 8.4 Open As Pp By lbRCTGeolocation.a 
> 加 RCTGeolocation.xcodeproj Fie Inspector lbRCTImage.a 
1 target, iOS SDK 8.4 New File... By libRCTLinking.a 
> 四 1 ee SDK 8.4 New Project... By lbRCTNetwork.a 
> 图 RCTLinking .xcodeproj Add Files to "address_book"... 胶 lbRCTSettings.a 
We Delete BS lbRCTText.a 
* 加 ME iOS SDK 8.4 芯 libRcTVibration.a 
> 加 RCTSetting New Group 您 ibRcTwebsocketa 
1 target, iOS SDK 8.4 New Group from Selection 了 
RCTTextxcodeproj 
> @ 1 target iO SDK8.4 Sort by Name | 
> 加 Rc 二 Sort by Type 3y Bundle Resources (3 items) 
1 target, i . { 
> 图 RCTWebsoci roj Find in Selected Groups.… 
1 target, iOS SDK 8.4 
» 天 address_bookTests Source Control p> 
> Products Project Navigator Help p 
图 8-8 ”添加 类 库 


此 时 会 打开 项 目 选 择 对 话 框 ， 从 中 选择 address_book/node modules/react-native/Libraries/ 
AdSupport/RCTAdSupport.xcodeproj 文 件 ， 如 图 8-9 所 示 。 


”三国 'o 可 


AdSupport 


《》 
Le 


| Favorites os > @ AdSupportIDS.js | 
B® RCTAdSupport.h | 
| Recents * 局 RCTAdSupport.m 
辕 我 的 所 有 文件 > 有 IISICSTTTECTTT 
| © icloud Drive | 
1 人 A: 应 用 程序 3e » 
国 来 面 
号 文稿 ponents » | 
© 下 载 onentHierarchy * | 
和 | 
国 资料 » RCTAdSupport.xcodep | 
oe | 
图 es » Created 15/7/8 上 午 6:20 | 
人 Mlihua » Modified 15/7/12 下 午 12:53 | 
日 影片 )pEngine » Last opened 15/7/12 下 午 12:53 | 
» Add Tags,.. 1 
月 音乐 » | 
图 图 片 | 
>» | 
图 8-9 ”添加 RCTAdSupport.xcodeproj 文 件 


添加 完 项 目 文件 后 ， 我 们 需要 添加 静态 库 。 选 中 address book 项 目 ， 选 中 Build Phases， 然 后 
展开 Link Binary With Libraries 节 点 ， 如 图 8-10 所 示 。 
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General Capabilities Info Build Settings Build Phases Build Rules 
Q 
» Target Dependencies (0 items) 
b Compile Sources (2 items) x 
Y Link Binary With Libraries (10 items) x 
Name Status 
部 iibheacta Required 人 
部 NibRCTActionSheeta Required 人 
By lbRCTGeolocation.a Required 人 
ibACTImage.a Required 人 
部 IibRCTLinkinga Required 人 
lbRCTNetwork.a Required ¢ 
部 iibRCTSettingsa Required 人 
Wy ibACTText.a Required 了 
Ey libRCTVibration.a Required 人 
By libRCTWebSocket.a Required 人 
Drag er trameworks 


图 8-10 ”展开 Link Binary With Libraries 节 点 


点 击 + 图 标 ， 添 加 静态 库 文件 。 如 图 8-11 所 示 ， 我 们 选中 libRCTAdSupport,a。 


Choose frameworks and libraries to add: 


Q 
™ ll workspace 

世 lbRCTAdSupport.a 
viOs 8.4 


靖 | Accelerate.framework 
请 Accounts.framework 
久 AddressBook.framework 
较 AddressBookUl.framework 
入 Adsupport.framework 
请 | AssetsLibrary.framework 
请 | AudioToolbox.framework 
久 Audiounitframework 
请 AVFoundation.framework 
靖 ] AVKit.framework 

_ | bundle1.0 


CarrierRunalel ltilitine rivlih 


Add Other... Cancel Add 


图 8-11 添加 静态 库 文 件 


8.4.4 程序 入 口 和 登录 


index.ios.js 是 React Native 的 人口 文件 ， 我 们 可 以 在 该 人 口 文件 中 装载 路 由 配置 、 全 局 变量 
等 。 在 “百灵 鸟 ”应 用 中 ， 我 们 需要 加 载 联 系 人 、 公 告 消息 、 信 息 管理 、 关 于 入 口 组 件 ， 具 体 
代码 如 下 : 
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Var 
Var 
Var 
Var 
Var 
Var 
Var 
Var 


这 里 我 们 引入 了 AdSupportIOS 组 件 ， 这 是 为 了 获取 设备 的 ID。AdSupportIOS 的 用 法 如 下 : 


React = require('react-native'); 
AdSupportI0S = require('AdSupportI0S'); 
Home = require('./views/home'); 

About = require('./views/about'); 
Manager = require('./views/manager'); 
Message = require('./views/message'); 
Util = require('./views/util'); 

Service = require('./views/service'); 


AdSupportI0S.getAdvertisingTrackingEnabled(function(){ 


AdSupportI0S.getAdvertisingId(function(deviceId){ 


//TODO: deviceId 即 设备 ID， 我 们 可 以 将 设备 ID 作为 用 户 登 录 的 token 的 一 部 分 


})); 


lo 


我 们 可 以 使 用 TabBarIOS 和 TabBarIOS.Item 组 件 来 加 载 不 同 的 功能 组 件 。 当 用 户 选中 某 个 item 
时 ( 即 TabpBarI0S.Item 的 selected 为 true 时 )， 会 展现 相应 的 视图 ， 具 体 的 代码 如 下 : 


<View style={this.state. showIndex}> 
<TabBarIOS barTintColor="#FFF"> 


<TabBar10S. Item 
icon={require('image!phone s')} 
title=" 首 页 " 
selected={this.state.selectedTab === 'home'} 
onpress={this. selectTab.bind(this, 'home')} 
> 
{this. addNavigator(Home，' 主 页 ')} 

</TabBar10S. Item> 


<TabBar10S. Item 
title=" 公 告 " 
icon={require('image!gonggao' )} 
selected={this.state.selectedTab === 'message'} 
onpress={this. selectTab.bind(this, 'message')} 
> 
{this. addNavigator(Message，' 公 告 ')} 

</TabBar10S. Item> 


<TabBar10S. Item 
title=" 管 理 " 
icon={require('image!manager' )} 
Selected={this.state.selectedTab === 'manager'} 
onpress={this. selectTab.bind(this, 'manager')} 
> 
{this. addNavigator(Manager， "管理 ' )} 
</TabBar10S. Item> 


<TabBarI0OS .Item 
title=" 关 于 " 
icon={require('image!about' )} 
selected={this.state.selectedTab === 'about'} 
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onPress={this. selectTab.bind(this, "about )} 
> 
{this. addNavigator(About,，' 关 于 ')} 
</TabBar10S. Item> 
</TabBarIOS> 
</View> 


同时 , 在 当前 视图 中 增加 了 登录 页 面 。 如 果 用 户 登 录 了 ， 则 直接 跳 转 到 首页 ， 如 果 没 有 登录 
则 显示 登录 组 件 。 我 们 在 AsyncStorage 中 存储 了 用 户 的 token， 如 果 AsyncStorage 不 存在 token 或 者 
token 失 效 ， 则 表明 用 户 需 要 登录 。index.ios.js 文 件 的 完整 代码 如 下 所 示 : 


"Use strict'; 

Var React = require('react-native'); 

Var AdSupportIOS = require('AdSupportI0S'); 
var Home = require('./views/home'); 

var About = require('./views/about'); 

var Manager = require('./views/manager'); 
var Message = require('./views/message'); 
var Util = require('./views/util'); 

Var Service = require('./views/service'); 


TabBarIOS ， 
Text， 
NavigatorIOS， 
AppRegistry, 
Image, 
TextInput， 
StatusBarIO9 ， 
ScrollView, 
TouchableHighlight, 
ActivityIndicatorI0S, 
AlertI0S, 
AsyncStorage, 

} = React; 


StatusBarIOS.setStyle('light-content'); 
var Address = React.createClass({ 


statics: { 
title: “主页 ， 
description: “选项 卡 " 

}, 

getInitialState: function(){ 
return { 


selectedTab: 'home', 

showIndex: { 
height:0， 
opacity:0 

showLogin:{ 
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flex:1, 
opacity:1 


isLoadingShow: false 
}; 
]， 


componentDidMount: function(){ 
var that = this; 
AsyncStorage.getItem('token', function(err, token){ 
if(lerr 8& token){ 
var path = Service.host + Service.loginByToken; 
Util.post(path, { 
token: token 
},function(data){ 
if(data.status){ 
that.setState({ 
showLogin: { 
height:0， 


showIndex:{ 
flex:1, 
opacity:1 


isLoadingShow: false 
]) 
}); 
}else{ 
that.setState({ 
showIndex: { 
height:0, 
opacity:0 


showLogin:{ 
flex:1, 
opacity:1 


所 5 


var path = Service.host + Service.getMessage; 
var that = this; 
Util.post(path, { 
key: Util.key 
}, function(data){ 
that.setState({ 
data: data 
}); 
})); 
}) 
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_selectTab: function(tabName){ 
this.setState({ 

selectedTab: tabName 

]); 

}, 


_addNavigator: function(component, title){ 
var data = null; 
if(title === “公告 '){ 
data = this.state.data; 
} 


return <NavigatorIOS 
style={{flex:1}} 
barTintColor="#007AFF" 
titleTextColor="#fff" 
tintColor="#fff" 
translucent={false} 
initialRoute={{ 
component: component, 
title: title, 

passProps:{ 

data: data 

J 

}} 

/>; 


}, 


_getEmail: function(val){ 
var email = val; 
this.setState({ 

email: email 
}); 
}, 


_getPassword: function(val){ 
var password = val; 
this.setState({ 

password: password 

}); 

}, 


_login: function(){ 
var email = this.state.email; 
var password = this.state.password; 
var path = Service.host + Service.login; 
var that = this; 


// 隐 藏 登录 页 并 且 加 载 loading 效 果 
that.setState({ 
showLogin: { 
height:0， 
width:0， 
flex:0, 


外 
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isLoadingShow: true 
]); 
AdSupportI0S.getAdvertisingTrackingEnabled(function(){ 
AdSupportI0S.getAdvertisingId(function(deviceld){ 
Util.post(path, { 
email: email, 
password: password, 
deviceId: deviceld, 
}, function(data){ 
if(data.status){ 
var user = data.data; 
// 加 入 数据 到 本 地 
AsyncStorage.multiSet([ 
['username', user.username], 
token', user.token], 
userid', user.userid], 
email', user.email], 
tel', user.tel], 
partment', user.partment], 
tag', user.tag], 
]，function(erT){ 
if(!lerr){ 
that.setState({ 
showLogin: { 
height:0， 
width:0， 


showIndex:{ 
flex:1, 
opacity:1 


isLoadingShow: false 

]); 
} 

}); 


}else{ 
AlertI0S.alert(' 登 录 '，' 用 户 名 或 者 密码 错误 '); 
that.setState({ 
showLogin: { 
flex:1, 
opacity:1 


showIndex:{ 
height:0, 
width:0, 


isLoadingShow: false 


}); 
l 


]) 
}, function(){ 
AlertI0S.alert(' 设 置 ', ' 无 法 获取 设备 唯一 标识 ' ); 
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D; 
}, function(){ 
AlertI0S.alert(' 设 置 ', ' 无 法 获取 设备 唯一 标识 ， 请 关闭 设置 一 隐私 一 广告 一 限制 广告 跟踪 '); 
}); 
及 


render: function(){ 
return( 
<View style={{flex:1}}> 
{this. state.isLoadingShow ? 
<View style={{flex:1, justifyContent:'center', alignItems:'center'}}> 
<ActivityIndicatorIOS size="small" color="#268DFF"></ActivityIndicatorIOS> 
</View>:null 


{!this. state.isLoadingShow ? 
<View style={this.state.showIndex}> 
<TabBarIOS barTintColor="#FFF"> 

<TabBar10S. Item 
icon={require('image!phone s')} 
title=" 首 页 " 
selected={this.state.selectedTab === 'home'} 
onpress={this. selectTab.bind(this, 'home')} 
> 
{this. addNavigator(Home，' 主 页 ')} 

</TabBarI0S. Item> 


<TabBarI0OS .Item 
title=" 公 告 " 
icon={require('image!gonggao' )} 
selected={this.state.selectedTab === 'message'} 
onpress={this. selectTab.bind(this， 'message')} 
> 
{this. addNavigator(Message，' 公 告 ' )} 

</TabBar10S. Item> 


<TabBar10S. Item 
title=" 管 理 " 
icon={require('image!manager' )} 
selected={this.state.selectedTab === 'manager'} 
onpress={this. selectTab.bind(this， "manager )} 
> 
{this. addNavigator(Manager， "管理 ' )} 
</TabBar10S. Item> 


<TabBar10S. Item 
title=" 关 于 " 
icon={require('image!about' )} 
selected={this.state.selectedTab === 'about'} 
onpress={this. selectTab.bind(this, 'about')} 
> 
{this. addNavigator(About,，' 关 于 ')} 
</TabBar10S. Item> 
</TabBar10S> 
</View> : null 


} 
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<ScrollView style={[this.state.showLogin]}> 
<View style={styles.container}> 
<View> 


八 


</View> 


<View style={styles.inputRow}> 
Text> 邮 箱 </Text><TextInput style={styles.input} 


人 入 


</View> 

<View style={styles.inputRow}> 

<Text> 密 码 </Text><TextInput style={styles.input} 
</View> 


<View> 


人 入 


onpress={this. login}> 
<Text style={{color:'#fff'}}> 登 录 </Text> 
</TouchableHighlight> 


</View> 
</View> 
</ScrollView> 
</View> 
3 
} 
1 


var styles = StyleSheet.create({ 

container:{ 
marginTop:50, 
alignItems:'center', 

]， 

logo:{ 
width:100， 
height:100, 
resizeMode: Image.resizeMode.contain 

]， 

inputRow:{ 
flexDirection: Tow ， 
alignItems: ' center ' ， 
justifyContent: 'center', 
marginBottom:10, 


]， 

input:{ 
marginLeft:10, 
width:220, 
borderWidth:Util.pixel, 
height:35, 


paddingLeft:8, 
borderRadius:5, 
borderColor: '#ccc' 


外 
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placeholder=" 请 输入 邮箱 ”onChangeText={this. getEmail}/> 


placeholder=" 请 输入 密码 ”password={true} onChangeText={this 


TouchableHighlight underlayColor="#fff" style={styles.btn} 


mage style={styles.logo} source={require('image!logo')}></Image> 


._getPpassword}/> 
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btn:{ 
marginTop:10, 
width:80， 
height:35， 
backgroundColor: '#3BC1FF ， 
justifyContent: center ， 
alignItems: center ' ， 
borderRadius: 4， 

} 

]); 


AppRegistry.registerComponent('address book', () => Address ) ; 
在 上 述 代 码 中 ,我 们 需要 注意 以 下 3 点 。 


口 在 componentDidMount 中 ， 首 先 从 AsyncStorage 获 取 token， 然 后 通过 向 服务 器 端 发 送 请 求 ， 

判断 用 户 的 token 是 否 有 效 。 如 果 验 证 失败 ， 则 显示 登录 组 件 。 

口 同时 ， 我 们 给 每 个 TabBarIOS.Item 组 件 分 配 了 一 个 NavigatorIOS 组 件 ， 作 为 该 功能 模块 的 

路 由 组 件 。 

口 在 登录 函数 login 中 , 我 们 需要 使 用 AsyncStorage.multiSet 设 置 多 个 字段 的 数据 ,同时 生 
成 以 设备 ID 为 基础 的 用 户 token。 

此 时 首页 已 经 开发 完成 ，TabBar 使 用 的 icon 可 以 到 https:/github.com/vczero/React-Native- 


App/tree/master/address_book/iOS/Images.xcassets 下 载 。 下 载 完 成 后 ,将 该 目录 下 的 所 有 图 片 文件 
拖 进 Xcode 的 Images.xcassets 即 可 。 完 成 后 的 登录 页 面 如 图 8-12 所 示 。 


iOS Simulator - iPhone 5s - iPhone 5.… 


GE 


邮箱 


密码 


图 8-12 ”登录 页 
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8.4.5 ”联系 人 列表 


我 们 默认 选中 的 是 主页 ( selectedTab='home' ), 所 以 登录 后 默认 加 载 的 是 联系 人 页 面 。 也 就 
是 说 ， 在 index.ios.js 中 _addNavigator 函 数 传 递 的 是 Home 组 件 。 首 先 ， 我们 需要 完成 部 门 组 别 的 
列表 ， 如 图 8-13 所 示 。 


© iOS Simulator - iPhone 5s - iPhone 5.… 
Carrier 全 11:44 PM mw 


-四 村 9 
图 8-13 ”部 门 组 别 列表 


首先 ,需要 将 泻 染 的 组 别 信息 构建 成 JSON 对 象 ， 然后 将 对 象 的 数组 泻 染 成 一 个 个 矩形 方块 。 
我 们 在 address_book/views/home.js 中 添加 如 下 代码 : 


Var React = require('react-native'); 
var Util = require('./util'); 
var ItemBlock = require('./home/itemblock'); 


var { 
View, 
Text， 
ScrollView, 
StyleSheet, 
TouchableHighlight, 
} = React; 


var Home = React.createClass({ 
getInitialState: function(){ 
// 减 去 paddingLeft &8& paddingRight 8& space 
var width = Math.floor(((Util.size.width - 20) - 50) / 4); 
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8.4 
var items = [ 
{ 
title: ' 研 发 '， 
partment: “框架 研发 ， 
color: '#126AFF', 
长 
{ 
title: ' 研 发 '， 
partment: 'BU 研 发 '， 
color: '#FFD600°', 
到 
{ 
title: “产品 ， 
partment: “公共 产品 '， 
color: '#F80728', 
} 
{ 
title: ' 产 品 '， 
partment: 'BU 产 品 '， 
color: '#05C147', 
点 
{ 
title: “产品 ， 
partment: “局 明星 ， 
color: '#FF4EB9', 
}; 
{ 
title: ' 项 目 '， 
partment: “项 目 管理 ， 
color: “#EE810D ， 
} 
J; 
return { 


items: items, 
width: width 


}; 

}, 

render: function(){ 
var Items1 = []; 
var Items2 = []; 


var items = this.state.items; 


for(var i = 0; i < 4; i++){ 
Items1.push( 
<ItemBlock 
title={items[i].title} 
partment={items[i].partment} 
width={this.state.width} 
color={items[i].color} 
nav={this.props.navigator} 
/> 
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for(var i = 4; i < items.length; i++){ 
Items2.push( 
<ItemBlock 
title={items[i].title} 
partment={items[i].partment} 
width={this.state.width} 
color={items[i].color} 
nav={this.props.navigator} 
/> 
); 
} 


return ( 
<ScrollView style={styles.container}> 

<View style={styles.itemRow}> 
{Items1} 

</View> 

<View style={styles.itemRow}> 
{Items2} 

</View> 


</ScrollView> 


)3 
}); 


var styles = StyleSheet.create({ 
container:{ 
flex:1, 
padding:10, 


学 
itemRow:{ 
flexDirection: Tow ， 
marginBottom:20, 
} 
)); 


module.exports = Home; 


从 上 面 的 代码 可 以 看 出 ， 我 们 加 载 了 ItemBlock 组 件 。 因 为 这 里 将 每 个 部 门 的 矩形 方块 抽象 
成 一 个 组 件 ， 即 address_boolkyviewshome/itemblock.js。ItemBlock 组 件 的 代码 如 下 : 


var React = require('react-native'); 
var Address = require('./address'); 
Var Service = require('./../service'); 
var Util = require('../util'); 


var { 
View, 
Text， 
StyleSheet, 
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TouchableHighlight, 
} = React; 


// 每 个 单项 组 件 
var ItemBlock = React.createClass({ 
render: function(){ 
var size ={ 
width: parseInt(this.props.width), 
height: parseInt(this.props.width), 
backgroundColor: this.props.color, 
}; 
return ( 
<TouchableHighlight underlayColor="#fff" onpress={this. loadPage}> 
<View style={[styles.itemBlock, size]}> 
<View> 
<Text style={styles.font18}>{this.props.title}</Text> 
</View> 
<View> 
<Text style={styles.font10}>{this.props.partment}</Text> 
</View> 
</View> 
</TouchableHighlight> 
); 
} 
// 加 载 页 面 
_1oadPage: function(e){ 
var nav = this.props.nav; 
var key = Util.key; 
var partment = this.props.partment; 
var path = Service.host + Service.getUser; 


Util.post(path, { 
key: key, 
partment : partment 
}, function(data){ 
nav.push({ 
title: this.props.tag, 
component: Address, 
passProps:{ 


data: data 
} 
1 
}.bind(this)); 
} 
ys 


var styles = StyleSheet.create({ 
itemBlock:{ 
justifyContent:'center', 
alignItems:'center', 
borderRadius:5, 
marginLeft:10, 


}, 
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font18:{ 
color: '#fff", 
fontSize:18, 
fontweight: "500 ， 


3 

font10:{ 
color: '#fff", 
fontSize:10, 


和 
]); 


module.exports = ItemBlock; 


ItemBlock 组 件 主要 有 5 个 属性 供 外 部 组 件 调 用 传递 : width、height、backgroundColor、 title 
和 partment。 这 些 属性 都 由 Home 组 件 的 JSON 对 象 传递 。 为 了 加 载 联 系 人 列表 ， 我 们 需要 在 点 击 
某 一 个 方块 时 加 载 相应 的 部 门 组 别 的 联系 人 列表 。 在 加 载 联系 人 列表 前 , 我 们 需要 准备 好 联系 人 
的 数据 。 因此 , 这 里 在 成 功 调 用 Service.getUser 服 务 后 , 我 们 才 将 新 的 路 由 推送 到 navigator 中 去 。 
这 里 我 们 又 要 加 载 一 个 新 的 组 件 Address， 这 是 因为 我 们 需要 根据 联系 人 数据 泻 染 页 面 。 我 们 需 
要 完成 的 效果 如 图 8-14 所 示 。 


框架 研发 部 - 研发 人 员 test1@126.com 


[mm 1900809789' 
木 框架 研发 部 - 研发 人 员 testO6 


[= 时 吴 用 19008097892 
E 各 类 | 杠 架 研发 部 - 研发 人 员 test2@126.com 
了 公孙 胜 19008097893 
人 框架 研发 部 - 研发 人 员 test3@126.corr 


> 关 胜 1900809789: 
框架 研发 部 -研发 人 员 test4@126.com 


19 


框架 研发 部 =- 研发 人 员 test5@ 


5 
DCom 


图 8-14 ”联系 人 列表 
因此 ， 我 们 在 address_book/views/home/address.js 文 件 中 添加 如 下 代码 : 
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var React = require('react-native'); 

Var Util = require('../util'); 

Var ActionSheetI0S = require('ActionSheet10S'); 
Var Service = require('./../service'); 


ScrollView, 
StyleSheet, 

Image, 
TouchableHighlight, 
inkingIO9， 
AletrtIO9， 

= React ; 


局: 


} 


var Address = React.createClass({ 
render: function(){ 
var View = []; 
var items = this.props.data.status? this.props.data.data: []; 
var colors = ['#E20079', '#FFD602', '#25BFFE', '#F90000', 
'#04E246'，'#04E246' ，'#00AFC9" ]; 
var color = { 
backgroundColor: colors[parseInt(Math.random()*7)] 
}; 
for(var i in items){ 
view.push( 
<View style={styles.row}> 
<View style={[styles.text, color]}> 
<Text style={{fontSize:25, color:'#fff', fontweight:'bold'}}> 
{items[i].username.substr(0, 1) || ' 未 '} 
</Text> 
</View> 
<View style={styles.part}> 
<Text> 
{items[i].username} 
</Text> 
<Text style={styles.unColor}> 
{(items[i].partment||'') + ' 部 一 ' + (items[i].tag||'') + ' 人 员 '} 
</Text> 
</View> 
<View style={{flex:1}}> 
<TouchableHighlight underlayColor="#fff" 
onpress={this.showActionSheet.bind(this, items[i].tel, 
items[i].email, items[i].username)}> 
<Text style={styles.1link}> 
{items[i].tel} 
</Text> 
</TouchableHighlight> 
<TouchableHighlight underlayColor="#fff" 
onpress={this.showActionSheet.bind(this, items[i].tel, 
items[i].email, items[i].username)}> 
<Text style={styles.1ink}> 
{items[i].email} 
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</Text> 
</TouchableHighlight> 
</View> 
</View> 
好 
} 
return ( 
<ScrollView> 
{view} 
</ScrollView> 
上 
区 


showActionSheet(tel, email, name) { 
var options = []; 
options.push(" 技 打 电 话 给 : ”+ name); 
options.push( "发 送 短信 给 : ”+ name); 
options.push( "发 送 邮 件 给 : ”+ name); 
options.push(' 取 消 '); 


var events = []; 
events.push(function(){ 
LinkingIOS.openURL('tel://' + tel); 
DD 
events.push(function(){ 
LinkingIOS.openURL('s 
)); 
events.push(function(){ 
LinkingIOS.openURL('mailto://' + email); 
})); 


ms://' + tel); 


ActionSheetI0S. showActionSheetWithOptions({ 
options: options, 
cancelButtonIndex: options.length - 1 ， 
} 
function(index){ 
events[index] && events[index](); 


var styles = StyleSheet.create({ 
row:{ 
height:80， 
borderBottomWidth: Util.pixel, 
borderBottomColor: '#ccc', 
flexDirection: Tow ， 
alignItems:'center’ 


外， 

text:{ 
width:50, 
height:50, 
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borderRadius:4, 
marginLeft:10, 
alignItems:'center', 
justifyContent:'center', 
backgroundColor: '#E30082', 
}， 
part:{ 
marginLeft:5, 
flex:1, 


}， 

link:{ 
color: '#1BB7FF', 
marginTop:2, 


法 
unColor:{ 
color: '#575656', 
marginTop:8， 
fontSize:12, 
} 
]); 


module.exports = Address; 


在 Address 组 件 中 , 我 们 使 用 LinkingIOS 组 件 来 调用 iOS 系 统 的 拨号 、 发 短信 、 发 邮件 等 功能 。 
点 击 用 户 的 电话 和 邮箱 ， 效 果 如 图 8-15 所 示 。 


拨打 电话 给 : 林冲 
发 送 短信 给 : 林冲 
发 送 邮件 给 : 林冲 


图 8-15 ”点 击 效果 
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8.4.6 ”公告 功能 


公告 功能 主要 有 两 个 页 面 : 列表 页 和 详情 页 。address_book/views/message.js 文 件 是 我 们 公告 
的 入 口 页 , 该 入 口 组 件 需 要 加 载 公 告 消息 列表 。Message 组 件 的 代码 如 下 : 


var React = require('react-native'); 

var Util = require('./util'); 

var Item = require('./message/item'); 

var Detail = require('./message/detail'); 
Var Service = require('./service'); 


var { 
View, 
Text， 
ScrollView, 
StyleSheet, 
TextInput, 
Image, 
TouchableOpacity, 
} = React; 


var Message = React.createClass({ 
render: function(){ 
var contents = []; 
var items = []; 
if(this.props.data.status){ 
contents = this.props.data.data; 
} 


for(var i = 0; i < contents.length; i++){ 
items.push( 
《Item 
data={contents[i]} 
nav={this.props.navigator} 
component={Detail} 
text={contents[i].message} 
name={contents[i].username} 
date={contents[i].time}/> 


3 
} 


return ( 
<ScrollView style={styles.container}> 
<View style={{height:50,padding:7,}}> 
<TextInput style={styles.search} placeholder=" 搜 索 "/> 
</View> 
<View style={{backgroundColor: '#fff', borderTopWidth:1, borderTopColor:'#ddd'}}> 
{items} 
<View style={{height:35}}></View> 
</View> 
</ScrollView> 
); 
} 
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]); 


var styles = StyleSheet.create({ 
container:{ 
flex:1， 
backgroundColor: '#F5F5F5 ， 
fjlexDirection: column 
}, 
search:{ 
height:35, 
borderWidth:Util.pixel, 
borderColor: '#ccc', 
paddingLeft:10, 
borderRadius:6, 
backgroundColor: '#fff", 
} 
]); 


module.exports = Message; 


我 们 在 入 口 组 件 中 使 用 items 数 组 来 添加 列表 项 ( 即 Item 组 件 ),Item 组 件 ( address_book/views/ 
message/item.js ) 的 代码 如 下 : 


var React = require('react-native'); 
Var Util = require('../util'); 
Var Service = require('../service'); 


var { 
View, 
Text， 
StyleSheet, 
Image, 
TouchableOpacity, 
} = React; 


var Item = React.createClass({ 
render: function(){ 
return ( 
<TouchableOpacity onpress={this.1loadPage.bind(this, this.props.data)}> 
<View style={styles.item}> 
<View style={styles.width55}> 
<Text style={{color:'#fff', fontSize:18,fontWeight:'bold'}}> 
{this.props.name.substr(0,1)}</Text> 
</View> 
<View style={{flexDirection:'column' ,flex:1}}> 
<Text numberOfLines={2} style={styles.text}> 
{this.props. text} 
</Text> 
<Text style={styles.date}> 
{this.props.date} 
</Text> 
</View> 
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<View numberOfLines={1} style={styles.m10}> 
<Text style={styles.name}>{this.props.name}</Text> 
</View> 
</View> 
</TouchableOpacity> 
); 


}), 
loadPage: function(data){ 


var content = data; 
this.props.nav.push({ 
title:' 消 息 详 情 '， 
component: this.props.component, 
passProps:{ 
content: content 


} 
]); 
} 
var styles = StyleSheet.create({ 
item:{ 
height:80, 
padding:5, 


borderBottomWidth: Util.pixel, 
borderBottomColor: “#ddd ' ， 
flexDirection: Tow ， 
alignItems: ' center ， 

]， 

img:{ 
width:50, 
height:50, 
borderRadius:4, 

]， 

width55:{ 
width:50, 
height:50, 
borderRadius:4, 
marginLeft:10, 
alignItems:'center', 
justifyContent:'center', 
backgroundColor: “#05C147 ， 
marginRight:10, 


marginBottom:5, 
opacity:0.7 

外 

date:{ 
color: '#ccc', 
fontSize:11, 

}) 

m10:{ 
marginLeft:10 
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让 
name:{ 
color: '#929292'， 
fontSize:13 
} 
DD; 


module.exports = Item; 


当 点 击 列表 项 时 ，Item 组 件 的 loadPage 函 数 加 载 公告 详情 页 。 公 告 列表 页 的 效果 如 图 8-16 
所 示 。 


息 已 iOS Simulator - iPhone 5s - iPhone 5... 


Carrier 仿 1:06 PM bs 


公告 


欢迎 新 同学 小 康 


李 欢迎 新 同学 催 明 


欢迎 新 同学 滚 边 
-四 要 0 


图 8-16 ”公告 消息 列表 


现在 我 们 已 经 完成 公告 消息 列表 ， 接 下 来 需要 完成 公告 消息 的 详情 页 。address_book/views/ 


message/detail.js 就 是 详情 页 组 件 ， 即 Detail， 具 体 代码 如 下 : 
var React = require('react-native'); 8 
var { 
View, 
Text， 
StyleSheet, 
Image, 
ScrollView, 
TouchableOpacity, 
} = React; 


var Detail = React.createClass({ 
render: function(){ 
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var content = this.props.content; 
return ( 
<ScrollView> 


<View style={styles.content}> 


<Text style={{lineHeight:20,}}>{content.message}</Text> 


</View> 


<View style={[styles.1luokuan, {marginTop:25}]}> 
<View style={{flex:1}}></View> 


<Text style={[styles.text, {color:'#007AFF'}]}>{content.username}</Text> 


</View> 


<View style={styles.1luokuan}> 
<View style={{flex:1}}></View> 


<Text style={[styles.text, {color:'#3BC1FF'}]}>{content.time}</Text> 


</View> 


</ScrollView> 

); 
} 
})); 


var styles = StyleSheet.create({ 

content:{ 
marginTop:20, 
marginLeft:15, 
marginRight:15, 
opacity:0.85, 

]， 

luokuan:{ 
flex:1, 
flexDirection: Tow ， 
marginRight:20, 


text:{ 
lineHeight:20, 
width:90 
} 
]); 


module.exports = Detail; 


详情 页 的 效果 如 图 8-17 所 示 。 
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Carrier 全 11:36 AM 


欢迎 新 同学 刘 明 


人 


图 8-17 ”消息 详情 页 


8.4.7 ”管理 功能 


address_book/views/manager.js 是 管理 页 面 的 入 口 ， 即 Manager 组 件 ， 其 代码 如 下 所 示 : 


var React = require('react-native'); 

var Util = require('./util'); 

var AddUser = require('./manager/addUser'); 

var ModifyPassword = require('./manager/modifyPassword'); 
var DeleteUser = require('./manager/deleteUser'); 

var PostMessage = require('./manager/postMessage'); 


var { 
View, 
Text， 
ScrollView, 
StyleSheet, 
TouchableOpacity, 
AsyncStorage, 

} = React; 


var Manager = React.createClass({ 


render: function(){ 
var colors = ['#F4000B', '#17B4FF', '#FFD900', '#F00000']; 
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var tags = ['U', 'A', 'D', 'M']; 
Var items = [' 修 改 密码 '，' 增 加 联系 人 '，' 删 除 联 系 人 '， “发布 公告 ']; 
var components = [ModifyPassword, AddUser, DeleteUser, PostMessage]; 
var JSXDOM = []; 
for(var i in items){ 
JSXDOM. push( 
<TouchableOpacity onpress={this. loadPage.bind(this, components[i], items[i])}> 
<View style={[styles.item, {flexDirection:'row'}]}> 
<Text style={[styles.tag, {color: colors[i]}]}>{tags[i]}</Text> 
<Text style={[styles.font, {flex:1}]}>{items[i]}</Text> 
</View> 
</TouchableOpacity> 
); 


return ( 
<ScrollView style={styles.container}> 
<View style={styles.wrapper}> 
{JSXDOM} 
</View> 


<View style={{marginTop:30}}> 
<TouchableOpacity onpress={this. clear}> 
<View style={[styles.item, {flexDirection:'row'}]}> 
Text style={[styles.tag, {color: colors[i]}]}>Q</Text> 
Text style={[styles.font,{flex:1}]}> 退 出 登录 </Text> 
</View> 
</TouchableOpacity> 
</View> 
</ScrollView> 
); 
)， 


NN 


_loadPage: function(component, title){ 
this.props.navigator.push({ 
title: title, 
component: component 
]); 
外 


_clear: function(){ 
this.props.navigator.pop(); 
AsyncStorage.clear(); 


})); 


var styles = StyleSheet.create({ 
container:{ 
flex:1, 
backgroundColor: '#F5F5F5", 
外， 


item:{ 
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height:40, 
justifyContent: 'center', 
borderTopWidth: Util.pixel, 
borderTopColor: “#ddd ， 
backgroundColor: '#fff ， 
alignItems:' center ， 

}， 

font:{ 
fontSize:15, 
marginLeft:5, 
marginRight:10, 

}， 

wrapper:{ 
marginTop:30, 


marginLeft:10, 
fontSize:16, 
fontWeight:'bold'" 
} 
}); 


module.exports = Manager; 


这 里 我 们 将 所 有 组 件 放 在 一 个 数组 中 ， 即 components = [ModifyPassword，AddUser， 
DeleteUser，PostMessage]。 然 后 遍历 数组 ， 生 成 功能 列表 ， 完 成 后 的 效果 如 图 8-18 所 示 。 


@ iOS Simulator - iPhone 5s - iPhone 5... 
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管理 
U 修改 密码 
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删除 联系 人 
M 发 布 公告 
Q 退出 登录 
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1. 修改 密码 功能 


这 个 功能 需要 用 户 传人 原始 密码 和 新 密码 ， 同 时 需要 传人 token ， 验 证 token 的 合法 性 。 在 
address_book/views/manager/modifyPassword.js 文 件 中 添加 如 下 代码 : 


Var React = require('react-native'); 
var Util = require('./../util'); 
Var Service = require('../service'); 


var { 
View, 
Text， 
ScrollView, 
StyleSheet, 
TouchableOpacity, 
TextInput, 
AlertI0S, 
AsyncStorage, 
} = React; 


var ModifyUser = React.createClass({ 


render: function(){ 
return ( 
<ScrollView> 


<View style={{height:35, marginTop:30,}}> 
<TextInput style={styles.input} password={true} placeholder=" 原 始 密码 " 
onChangeText={this. get01dPasswordj/> 
</View> 


<View style={{height:35,marginTop:5}}> 
<TextInput style={styles.input} password={true} placeholder=" 新 密码 " 
onChangeText={this. getNewPassword}/> 
</View> 


<View> 
<TouchableOpacity onpress={this. resetPassword}> 
<View style={styles.btn}> 
<Text style={{color:'#FFF'}}> 修 改 密码 </Text> 
</View> 
</TouchableOpacity> 
</View> 
</ScrollView> 
); 
外 


_get01dPassword: function(val){ 
this.setState({ 
oldPassword: val 
]); 
}, 
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_getNewPassword: function(val){ 
this.setState({ 

password: val 

]); 

}, 


_TesetPassword: function(){ 
var path = Service.host + Service.updatepassword; 
var that = this; 
// 需 要 服务 器 端 确认 登录 的 token， 只 有 token 一 致 才能 有 权限 修改 审 码 
AsyncStorage.getItem('token', function(err, data){ 
if(!lerr){ 
Util.post(path, { 
password: that.state.password, 
oldPassword: that.state.oldPassword, 
token: data, 
}, function(data){ 
if(data.status){ 
AlertI0S.alert(' 成 功 '，data.data);} 


}else{ 
AlertI0S.alert(' 失 败 '，data.data); 
} 
]); 
}else{ 
AlertI0S.alert(' 失 败 '，data.data); 
} 
]); 
} 
]); 
var styles = StyleSheet.create({ 
input:{ 
flex:1， 


marginLeft:20, 
marginRight:20, 
height:35， 
borderWidth:1, 
borderColor: '#ddd', 
borderRadius:4, 
paddingLeft:5, 
fontSize:13, 

} 

btn:{ 
justifyContent:'center', 
alignItems:'center', 
marginTop:20, 
backgroundColor: '#4DB8FF ， 
height:38, 
marginLeft:20, 
marginRight:20, 
borderRadius:4, 
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module.exports = ModifyUser; 


修改 密码 界面 完成 的 效果 如 图 8-19 所 示 。 


了 四 中 ioSs Simulator - iPhone 5s - iPhone 5... 
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图 8-19 ”修改 密码 
2. 增加 用 户 功能 
增加 用 户 功能 也 是 独立 组 件 ， 即 address_book/views/manager/addUser.js， 具 体 代码 如 下 : 


Var React = require('react-native'); 
var Util = require('./../util'); 
var Service = require('./../service'); 


var { 
View, 
Text， 
ScrollView, 
StyleSheet, 
TouchableOpacity, 
TextInput， 
PickerIO9S， 
AletrtI09， 
} = React; 


var AddUser = React.createClass({ 
getInitialState: function(){ 
Var “itemns.= | A, Bs "GD. ES EY | 
Var tags = [' 框 架 研 发 '，'BU 产 品 '，'BU 研 发 '，' 启 明星 '，' 项 目 管 理 '，' 公 共产 品 ']; 
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return { 

items: items, 

tags: tags, 

selectA:{ 
backgroundColor: '#3BC1FF ， 
borderColor: '#3BC1FF" 

)， 

select A:{ 
color: '#FFF’ 

)， 

yan:{ 
backgroundColor: '#3BC1FF ， 
borderColor: '#3BC1FF" 


} 
yan_text:{ 
color: '#FFF" 
所 
tag: 研发 ， 
partment: “框架 研发 " 


生 
)， 


render: function(){ 
var tagone = []; 
for(var i = 0; i <3; i++){ 
tagOne.push 
<TouchableOpacity onpress={this. select.bind(this, this.state.items[i])}> 
<View style={[styles.part, this.state['select' + this.state.items[i]]]}> 
<Text style={this.state[ "select ' + this.state.items[i]]}> 
{this. state. tags[i]}</Text> 
</View> 
</TouchableOpacity> 
); 
} 


var tagTwo = []; 
for(var i = 3; i «<6; i++){ 
tagTwo.push 
<Touchable0pacity onpress={this. select.bind(this, this.state.items[i])}> 
<View style={[styles.part, this.state['select' + this.state.items[i]]]}> 


<Text style={this.state['select ' + this.state.items[i]]}> 
{this. state. tags[i]}</Text> 


</View> 

</TouchableOpacity> 

); 
} 


return ( 
<ScrollView style={{paddingTop:30}}> 
<View style={styles.row}> 
<Text style={styles.1label}> 用 户 名 </Text> 
<TextInput style={styles.input} onChangeText={this. setUserName}/> 
</View> 
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<View style={styles.row}> 

<Text style={styles.label}> 密 码 </Text> 

<TextInput style={styles.input} password={true} 
placeholder=" 初 始 密码 ”onChangeText={fthis. setPassword}/> 
</View> 


<View style={styles.row}> 

<Text style={styles.label}> 邮 箱 </Text> 

<TextInput style={styles.input} onChangeText={this. setEmail}/> 
</View> 


<View style={styles.row}> 

<Text style={styles.label}> 电 话 </Text> 

<TextInput style={styles.input} onChangeText={this. setTel}/> 
</View> 


<View style={styles.partment}> 


</View> 

<View style={styles.partment}> 
{tagTwo} 

</View> 


<View style={{marginTop:30,flexDirection:'row', justifyContent:'center'}}> 
<TouchableOpacity onpress={this. selectType.bind(this, 'yan')}> 
<View style={[styles.part, this.state.yan]}> 
<Text style={this.state.yan_text}> 研 发 </Text> 
</View> 
</TouchableOpacity> 


<TouchableOpacity onpress={this. selectType.bind(this, "chan' )}> 
<View style={[styles.part, this.state.chan]}> 
<Text style={this.state.chan text}> 产 品 </Text> 
</View> 
</TouchableOpacity> 


<TouchableOpacity onpress={this. selectType.bind(this, 'project')}> 
<View style={[styles.part, this.state.project]}> 
<Text style={this.state.project text}> 项 目 </Text> 
</View> 
</TouchableOpacity> 
</View> 


<View style={{marginTop:30, alignItems:'center', justifyContent:'center'}}> 
<TouchableOpacity onpress={this. addUser}> 
<View style={styles.btn}> 
Text> 创 建 用 户 </Text> 
</View> 
</TouchableOpacity> 
</View> 
</ScrollView> 
); 
外 


_select: function(id){ 


人 入 
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var obj = {}; 
var color = {}; 
var items = { 
A:{}, 
B:{}, 


}; 

// 加 上 选中 效果 

obj['select' + id] = { 
backgroundColor: '#3BC1FF ， 
borderColor: '#3BC1FF 


上 

color['select ' + id]={ 
color: '#fff', 

$b 


this. setState(obj); 
this.setState(color); 
this.setState(); 
// 清 除 其 他 选中 效果 
delete items[id]; 
for(var i in items){ 
var new0bj = {}; 
newObj['select' + i] = { 
backgroundColor: '#FFF', 
borderColor: '#ddd 


}; 
var newColor = {}; 
newColor['select " + i] ={ 


color: '#000', 
}; 
this.setState(newO0bj); 
this.setState(newColor); 
} 
// 增 加 变量 
var partment =“ 框 架 研 发 ; 
switch (id){ 
Case 'A': 
partment = this.state.tags[0]; 
break; 
case 'B': 
partment = this.state.tags[1]; 
break; 
Case 'C': 
partment = this.state.tags[2]; 
break; 
case 'D': 
partment = this.state.tags[3]; 
break; 
Case 'E': 
partment = this.state.tags[4]; 
break; 
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Case 'F': 
partment = this.state.tags[5]; 
break; 


this.setState({ 
partment: partment 


)); 

)， 

_selectType: function(id){ 
var obj = {}; 


var color = {}; 

var items = { 
yan:{}, 
chan:{}, 
project:{} 


// 加 上 选中 效果 
obj[id] = { 
backgroundColor: #3BC1FF ， 
borderColor: '#3BC1FF 

}; 
color[id + ' text'] ={ 
color: '#fff', 

}; 
this.setState(obj); 
this.setState(color); 


// 清 除 其 他 选中 效果 
delete items[id]; 
for(var i in items){ 
var new0bj = {}; 
newObj[i] = { 
backgroundColor: '#FFF', 
borderColor: '#ddd" 
}; 
var newColor = {}; 
newColor[i + ' text'] = { 
color: '#000', 
}; 
this. setState(new0bj); 
this.setState(newColor); 


} 
// 增 加 变量 
Var tag =“ 研 发 ; 
switch (id){ 

case yan : 
tag = “研发 ; 
break; 
case 'chan': 
tag = "产品 '，) 
break; 
case 'project': 
tag = ' 项 目 '，; 
break; 
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default : 
break; 
} 


this.setState({ 
tag: tag 


}, 


setUserName: function(val){ 
this.setState({ 
username: val 
]); 
}, 


setpassword:function(val){ 
this.setState({ 

password: val 

]); 
}, 


_setEmail:function(val){ 
this.setState({ 
email: val 
]); 
}, 


setTel: function(val){ 
this.setState({ 

tel: val 

]); 
}, 


_addUser: function(){ 
var username = this.state.username; 
var email = this.state.email; 
var password = this.state.password; 
var partment = this.state.partment; 
var tag = this.state.tag; 
var tel = this.state.te 


一 


if(lusername || !email || !password || !tel){ 

return AlertI0S.alert(' 提 示 '，' 用 户 名 、 初 始 密 码 、 邮 箱 电 话 、 必 填 ， 请 确认 !'); 
} 
var obj = { 


username: username, 
email: email, 
password: password, 
partment: partment, 
tag: tag, 
tel: tel 

}; 
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var path = Service.host + Service.createUser; 
Util.post(path, obj, function(data){ 
if(data.status){ 
AlertI0S.alert(' 成 功 ', "创建 用 户 成 功 ， 请 告知 用 户 初始 密码 '); 


jelsef 
AlertIOS.alert(' 失 败 '，, "创建 用 户 失败 '); 
中 
} 
]); 


var styles = StyleSheet.create({ 

row:{ 
flexDirection:'row', 
alignItems:'center', 
marginBottom:7, 

外 

label:{ 
width:50, 
marginLeft:10, 

]， 

input:{ 
borderWidth: Util.pixel, 
height:35, 
flex:1, 
marginRight:20, 
borderColor: '#ddd', 
borderRadius: 4， 
paddingLeft:5， 
fontSize:14, 

}) 

partment:{ 
flexDirection:'row', 
justifyContent:'center', 
marginTop:10, 
了 

part:{ 
width:65, 
height:30， 
borderWidth:Util.pixel, 
borderColor: '#ddd', 
borderRadius:3, 
alignItems:'center', 
justifyContent:'center', 
marginRight:10 

}, 

btn:{ 
borderColor: #268DFF ， 
height:35， 
width:200， 
borderRadius:5, 
borderWidth:Util.pixel, 
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alignItems: center ， 
justifyContent: "centeT 
} 
]); 


module.exports = AddUser; 


这 里 需要 注意 的 是 ， 单 选 按钮 的 实现 代码 比较 累 歼 ， 可 以 参考 https:/github.com/vczero/react- 
native-tab-menu/blob/mastertab.js 进 行 修改 。 最 终 实现 的 增加 用 户 界 面 的 效果 如 图 8-20 所 示 。 
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3. 删除 用 户 
这 里 我 们 需要 根据 用 户 的 邮箱 删除 用 户 ， 上 有 具体 代 码 如 下 : 
var React = require('react-native'); 


var Util = require('./../util'); 
var Service = require('../service'); 


var { 
View, 
Text， 
ScrollView, 
StyleSheet, 
TouchableOpacity, 
TextInput， 
AletrtIO9， 
AsyncStorage, 
} = React; 
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var DeleteUser = React.createClass({ 


render: function(){ 
return ( 
<ScrollView> 


<View style={{height:35, marginTop:30,}}> 
<TextInput style={styles.input} placeholder=" 请 输入 用 户 的 邮箱 " 
onChangeText={this. getEmail}/> 
</View> 


<View> 
<TouchableOpacity onpress={this. deleteUser}> 
<View style={styles.btn}> 
<Text style={{color:'#FFF'}}> 删 除 用 户 </Text> 
</View> 
</TouchableOpacity> 
</View> 
</ScrollView> 
); 
外 


_getEmail: function(val){ 
this.setState({ 
email: val 


}); 
所 


_deleteUser: function(){ 
var that = this; 
AlertI0S.alert(' 提 示 '，' 确 认 删 除 该 用 户 ?'，[ 
{text: ' 删 除 '，onPress: function(){ 
var path = Service.host + Service.deleteUser; 
AsyncStorage.getItem('token', function(err, data){ 
if(lerr){ 
Util.post(path, { 
token: data, 
email: that.state.email 
}, function(data){ 
if(data.status){ 
AlertI0S.alert(' 成 功 '，' 删 除 成 功 '); 


}else{ 
AlertI0S.alert(' 失 败 '，' 删 除 失 败 '); 
} 
}); 
}else{ 
AlertI0S.alert(' 提 示 '，' 没 有 权限 '); 
} 
)); 
. 
}, 
{text: ' 取 消 '，onPress: ()=>null}， 
); 


} 
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} 


var styles = StyleSheet.create({ 

input:{ 
flex:1， 
marginLeft:20, 
marginRight:20, 
height:35, 
borderWidth:1, 
borderColor: '#ddd '， 
borderRadius:4, 
paddingLeft:5， 
fontSize:13, 

}， 

btn:{ 
justifyContent:'center’', 
alignItems:'center', 
marginTop:20, 
backgroundColor: '#1DB8FF ， 
height:38, 
marginLeft:20, 
marginRight:20, 
borderRadius:4, 


} 
Ds 


module.exports = DeleteUser; 


出 除 用 户 界面 的 最 终 效果 如 图 8-21 所 示 。 
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4. 发 布 公告 
最 后 调用 发 布 公告 接口 发 布 公告 ， 例 如 通知 同事 新 同学 的 加 入 ， 具 体 代 码 如 下 : 
Var React = require('react-native'); 


Var Service = require('./../service'); 
var Util = require('./../util'); 


var { 
View, 
TextInput, 
ScrollView, 
StyleSheet, 
TouchableOpacity, 
Image, 
Text， 
AsyncStorage 
} = React; 


var PostMessage = React.createClass({ 


render: function(){ 
return ( 
<ScrollView > 
<View> 
<TextInput multiline={true} 
onChangeText={this. onChange} 
style={styles. textinput} 
placeholder=" 请 输入 公告 内 容 "/> 
</View> 
<View style={{marginTop:20}}> 
<TouchableOpacity onpress={this. postMessage}> 
<View style={styles.btn}> 
Text style={{color:'#fff'}}> 发 布 公告 </Text> 
</View> 
</TouchableOpacity> 
</View> 
</ScrollView> 
); 
外 


作 


_onChange: function(val){ 
if(val){ 
this.setState({ 
message: val 
]); 
} 
)， 


_postMessage: function(){ 
var that = this; 


AsyncStorage.getItem('token', function(err, token){ 
if(err){ 
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alert(' 权 限 失 效 ， 请 退出 App， 重 新 登录 '); 
}else{ 
Util.post(Service.host + Service.addMessage, { 
token: token, 
message: that.state.message 
}, function(data){ 
if(data.status){ 
alert( ' 添 加 成 功 1 '); 
}else{ 
alert(' 添 加 失败 | '); 


二 


var styles = StyleSheet.create({ 
textinput:{ 

flex:1， 
height:100， 
borderWidth:1, 
borderColor: '#ddd ， 
marginTop:30， 
marginLeft:20, 
marginRight:20, 
paddingLeft:8, 
fontSize:13, 
borderRadius:4 


justifyContent:'center', 
alignItems:'center', 
backgroundColor: '#1DB8FF"', 
height:38, 
marginLeft:20, 
marginRight:20, 
borderRadius:4, 
} 
]); 


module.exports = PostMessage; 


发 布 公告 界 面 完 成 的 效果 如 图 8-22 所 示 。 
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了 局 0 iOS Simulator - iPhone 5s - iPhone 5.… 
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8-22 ”发 布 公告 


8.4.8 关于 


关于 页 面 一 般 是 介绍 我 们 的 项 目 , 这 里 我 们 使 用 WebView 组 件 跳 转 到 GitHub 项 目 页 面 ， 相关 
文件 为 address_book/views/about.js， 上 有 具体 代 码 如 下 : 


var React = require('react-native'); 
var webview = require('./about/webview'); 


var { 
View, 
Text， 
ScrollView, 
StyleSheet, 
Image, 
TouchableOpacity, 
} = React; 


var About = React.createClass({ 
render: function(){ 
return ( 


<ScrollView style={styles.container}> 


<View style={styles.wrapper}> 
<Image style={styles.avatar} source={require('image!lme 1')}></Image> 


图 灵 社 区 会 员 蚂 蜂 (240671488@qq.com) 专 享 尊重 版 权 


8.4 客户 端 设计 和 开发 二 317 


<Text style={{fontSize:14, marginTop:10, color:'#ABABAB'}}>Author: vczero</Text> 
<Text style={{fontSize:14, marginBottom:20, color:'#ABABAB'}}> 
Version: vO.0.1</Text> 


<View style={{flexDirection:'row' }}> 
<TouchableOpacity onPress= 
{this. openWebView.bind(this, 'https://github.com/vczero/React-Native-App' )}> 
<Image style={styles.img} source={require('image!github')}/> 
</TouchableOpacity> 


<TouchableOpacity onPress= 
{this. openWebView.bind(this, 'http://weibo.com/vczero' )}> 
<Image style={[styles.img, {width:25,height:25}]} 
source={require('image!weibo' )}/> 
</TouchableOpacity> 
</View> 
</View> 


</ScrollView> 
2 
和 


_openWebView: function(url){ 
this.props.navigator.push({ 
title:' 项 目地 址 '， 
component: webview, 
passProps:{ 
url: url 


var styles = StyleSheet.create({ 
container:{ 

flex:1, 

}， 

wrapper:{ 

alignItems:'center', 

marginTop:50, 

}， 

avatar:{ 

width:90， 
height:90， 
borderRadius:45, 

}， 

img:{ 
width:20， 
height:20， 
marginRight:5, 


}); 


module.exports = About; 
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这 里 我 们 调用 了 WebView 组 件 ( 详 见 address_book/views/about/webview/js )， 具 体 代 码 如 下 : 


Var React = require('react-native'); 
var { 

WebView, 

ScrollView, 

Text， 

View, 
} = React; 


var webview = React.createClass({ 
render: function(){ 
return( 
<View style={{flex:1}}> 
<WebView url={this.props.url}/> 
</View> 


})); 


module.exports = webview; 


8.4.9 建议 
到 目前 为 止 ， 我 们 算是 开发 完 这 个 项 目 了 。 我 们 可 以 在 服务 器 端 使 用 node app.js 启 动 服务 
器 端 项 目 ， 然 后 在 Xcode 中 使 用 快捷 键 cmd+R 运 行 React Native 项 目 ， 接 着 就 能 看 到 最 终 效果 了 。 


“百灵 鸟 ”App 虽 已 完成 ,但 还 有 很 多 需要 完善 的 地 方 。 目 前 “百灵 鸟 ”App 托 管 在 GitHub 
上 ， 地 址 是 https://github.com/vczero/React-Native-App， 我 们 希望 大 家 一 起 继续 完善 其 功能 。 
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第 儿 章 
基于 LBS 的 应 用 开发 


在 第 8 章 中 , 我 们 不 仅 开 发 了 React Native 客 户 端 , 还 开发 了 Node.js 服 务 端 , 一 步 步 实 现 了 “ 百 
灵 鸟 ”这 款 简单 的 应 用 。 作 为 开发 者 ,我 们 深 知 技术 只 有 运用 于 生产 才能 产生 价值 ， 只 有 通过 实 
战 才能 将 技术 掌握 得 更 深 。 在 这 一 章 中 ,我 们 将 继续 实战 的 风格 ， 开 发 一 款 基 于 LBS 的 应 用 一 一 

目前 ，020 市 场 十 分 火爆 ,各 巨头 都 在 020 领 域 深 耕 布局 。 比 如 ,“ 美 团 外 卖 ” 和 “ 饿 了 人 么 ” 
大 肆 补 贴 观众 。 我 们 打开 “ 美 团 外 卖 ”， 首 先 会 定位 位 置 ， 然 后 显示 附近 的 商家 列表 ， 这 个 功能 
就 是 LBS 功 能 。 一般 情况 下 ， 我 们 不 会 去 构建 基础 的 LBS 服 务 ， 就 像 定位 服务 一 样 ， 我 们 不 会 为 
了 地 址 解析 去 构建 庞大 的 地 址 库 。 在 实际 的 开发 中 ,一 般 会 选择 类 似 高 德 地 网 .百度 地 图 .Google 
地 图 提供 的 API 来 实现 LBS 功 能 。 在 这 一 章 中 ， 我 们 会 借助 高 德 地 图 提供 的 API 来 实现 “附近 ” 
应 用 。 


9.1 功能 设计 

在 开发 App 之 前 , 我 们 都 需要 确定 需求 。 而 需求 确认 中 最 重要 的 环节 是 功能 设计 和 细节 把 控 。 
对 于 我 们 个 人 开发 程序 而 言 ， 灵 活 度 要 高 得 多 ， 但 是 在 开发 App 之 前 都 会 思考 ， 这 款 App 应 该 包 
含 哪些 功能 。 我 们 不 需要 去 做 PRD (产品 需求 文档 ) 评审 ， 因 为 很 多 功能 和 技术 实现 都 已 经 在 脑 
海中 进行 了 认证 。 我 们 需要 做 的 就 是 勾勒 有 哪些 功能 以 及 相关 功能 需要 展示 的 信息 。 


9.1.1 需求 确定 

“附近 ”应 用 应 该 有 什么 需求 呢 ? 这 里 我 们 选择 几 个 经 常 性 的 需求 一 一 卫生 间 、 银 行 、 餐 饮 
和 电影 院 。 比 如 ,我 们 到 了 一 个 地 方 , 想 要 看 看 附近 的 取款 机 在 哪 ， 需 要 知道 离 自己 最 近 的 卫生 
间 在 哪 , 需要 看 看 附近 有 没有 什么 吃饭 的 地 方 等 。 这 里 我 们 开发 的 “附近 ”应 用 需要 的 功能 如 下 。 
口 显示 用 户 附近 的 公厕 列表 ( 含 道路 、 距 离 、 所 属 单位 等 信息 )。 
口 显示 用 户 附近 的 银行 列表 ( 含 ATM、 银 行 名称 、 距 离 、 道 路 信息 ， 如 果 有 电话 ， 则 显示 
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电话 )。 
口 显示 用 户 附近 的 餐饮 列表 ( 含 商家 名 称 、 和 餐饮 类 型 、 
显示 电话 )。 


口 列表 的 显示 条 数控 制 在 10 条 以 内 。 

口 所 有 列表 都 有 基本 的 详情 页 。 

口 显示 的 电话 号 码 能 够 拨号 。 

口 所 有 列表 项 都 在 对 应 的 地 图 上 展示 。 


为 了 方便 开发 ,需要 画 出 简单 的 原型 ， 如 图 9-1 所 示 。 


电话 、 道 路 信息 ， 如 果 有 电话 ， 则 


口 显示 用 户 附 近 的 电影 院 列表 ( 含 电 影院 名 称 、 距 离 、 道 路 等 信息 )。 


美食 地 医 < 美食 音乐 酒店 
音乐 酒店 67 米 
SEE 
丰收 人 家 84 米 
si 
一 品 淘 91 米 


音乐 酒店 详情 


北上 春光 烤肉 102 米 


列表 页 详情 页 
图 9-1 原型 


9.1.2 ”开发 目录 结构 
针对 原型 ,我们 设计 的 代码 结构 如 图 9-2 所 示 。 


图 灵 社 区 会 员 蚂 蜂 (240671488@qq.com) 专 享 


地 图 展示 位 置 


地 图 展示 
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本 


加 nearby 
pb 站 .idea 
四 android 
疡 ios 
四 Nearby 
了 站 views 
区 bank.js 
范 detailjs 
范 film.Jjs 
区 foodJjs 
茵 listjs 
攻 mapJjs 
区 toiletjs 
四 utiljs 
男 index,js 
pb Dnode_modules 
目 .flowconfig 
全 .gitignore 
目 .watchmanconfig 
区 index.androidjs 
四 index.iosjs 
是 k package.json 


梧 vv 


图 9-2 ”代码 结 松 


在 上 述 结构 中 ，index.ios.js 是 入 口 文件 ，Nearby 是 附近 功能 的 代码 目录 。Nearby/index.js 是 附 
近 功 能 的 人口 文件 ，Nearby/views/util.js 是 工具 模块 ，Nearby/views/map.js 是 WebView 地 图 模块 ， 
Nearby/views/list.js 是 列表 组 件 ，Nearby/views/detail.js 是 详情 页 组 件 ，Nearby/views/food.js 是 餐饮 
组 件 ，Nearby/views/film.js 是 电影 组 件 ，Nearby/views/toilet.js 是 卫生 间 组 件 ，Nearby/views/bank.js 
是 银行 组 件 。 


9.2 程序 入 口 和 工具 模块 


开发 ReactNative 程 序 的 第 一 步 是 编写 人 口 文件 ， 即 index.iosjs 代 码 。 在 入口 文件 中 ， 我 们 需 
要 加 载 人 口 组 件 ， 同 时 还 需要 开发 好 工具 类 作为 公共 模块 调用 。 


9.2.1 注册 应 用 程序 


在 index.ios.js 中 , 我 们 加 载 Nearby 的 入 口 模块 。 这 里 我 们 使 用 AppRegistry.registerComponent 
注册 应 用 程序 ， 具 体 代 码 如 下 : 


"Use strict'; 
Var React = require('react-native'); 
var Nearby = require('./Nearby/index'); 


var { 
AppRegistry 
} = React; 
AppRegistry.registerComponent('nearby', () => Nearby); 
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9.2.2 工具 模块 


为 了 方便 开发 ， 我 们 需要 开发 一 个 工具 模块 ， 该 工具 模块 包含 单位 像素 、POST 方 法 、GET 
方法 、 高 德 地 图 API key 等 ， 具 体 代 码 如 下 : 


var React = require('react-native'); 
var Dimensions = require('Dimensions'); 


var { 
PixelRatio 
} = React; 


var Util = { 
// 单 位 像素 
pixel: 1 / PixelRatio.get(), 
// 屏 幕 尺寸 
size: { 
width: Dimensions.get('window' ).width, 
height: Dimensions.get('window').height 


外 


//POST 方 法 
post: function (url, data, callback) { 
var fetchOptions = { 

method: 'POST', 

headers: { 
‘Accept': ‘application/json’', 
‘Content-Type': 'application/json' 

} 

body: JSON.stringify(data) 

}; 


fetch(url, fetchOptions) 
.then((response) => response.text()) 
.then((responseText) => { 

callback(JSON.parse(responseText)); 


}); 

)， 

//GET 方 法 

getJSON: function(url, callback){ 

fetch(url) 
.then((response) => response.text()) 
.then((responseText) => { 
callback(JSON.parse(responseText)); 

]); 

)， 


// 高 德 地 图 key， 测 试 key， 请 勿 商用 
amapKey: “98cd4d3c1c2865132e73d851654Cc9c1b ， 
// 周 边 搜索 服务 


searchURL: 'http://restapi.amap.com/v3/place/around?', 
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detailURL: 'http://restapi.amap.com/v3/place/detail? 

}; 

module.exports = Util; 

因为 这 里 选择 的 是 高 德 地 图 API， 所 以 需要 申请 开发 者 key。 在 上 面 的 代码 中 ，amapkey 是 作 
为 测试 使 用 ， 后 期 可 能 会 变动 。 因 此 ， 我 们 需要 按照 以 下 步 又 完成 key 的 申请 。 首 先 ， 可 以 到 
http://id.amap.com/member/ 注 册 开 发 者 账号 。 注 册 成 功 后 ,打开 http://lbs.amap.com/console/ 控 制 台 ， 
选择 获取 key。 这 里 ,我 们 需要 申请 两 个 key: 一 个 是 Web 服 务 API 的 key， 它 主要 用 于 调用 附近 的 
搜索 服务 和 详情 服务 ， 另 一 个 是 JavaScript API 的 key， 用 于 在 WebView 里 面 使 用 HTML+JS 调 用 高 
德 地 图 。 申 请 key 的 选择 界面 如 图 9-3 所 示 。 


应 用 名 称 : 注入 和 * 


名 称 中 


可 使 用 汉字 、 字 母 或 数字 ,不 超过 45 个 字符 
绑 定 服务 : Web 服 务 API © JavaScript API iOS 平 台 SDK 


Android 平 台 SDK Windows 平 台 SDK 
可 使 用 产品 : JavaScript API JavaScript 云 图 APl 地 图 组 件 


我 已 经 阅读 并 同意 《高 德 API 使 用 条 款 》 


EEC 


图 9-3 ”申请 key 


9.2.3 Nearby 组 件 入 口 


Nearby/index.js 是 “附近 ”的 功能 组 件 入 口 ， 我 们 需要 在 该 组 件 中 加 载 其 他 组 件 的 路 由 以 及 
定义 一 些 全 局 变量 ， 具 体 代码 如 下 : 


Var React = require('react-native'); 
var Bank = require('./views/bank'); 
var Film = require('./views/film'); 
var Food = require('./views/food'); 
var Toilet = require('./views/toilet' 
var Map = require('./views/map'); 


a 
~. 


var { 
AppRegistry, 
StyleSheet, 
Text， 
View, 
ScrollView, 
NavigatorIOS， 
StatusBarIO9 ， 
TabBarIOS 

} = React; 
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// 是 否 开启 真实 的 定位 ?如果 开启 了 _GEO_OPEN， 则 _GEO_TEST_P0S 会 失效 
_GEO_ OPEN = true; 

// 模 拟定 位 数据 

_GEO_TEST_POS = “121.390686,31.213976 


// 高 亮 

StatusBarI0S.setstyle( "1ight-content ); 

// 开 启 网 络 状态 
StatusBarI0S.setNetworkActivityIndicatorVisible(true); 


var Nearby = React.createClass({ 
getInitialState: function(){ 
return{ 
Selected: ' 美 食 ' 
}; 
)， 
render: function() { 
return ( 
<View style={styles.container}> 
<TabBarIOS> 
<TabBarI0OS .Item 
title=' 美 食 ' 
selected={this.state.selected === ' 美 食 '} 
icon={require("image!food")} 
onPress={()=>{this.setState({selected: ' 美 食 '})}}> 
<NavigatorIOS 
barTintColor="#007AFF" 
titleTextColor="#fff" 
tintColor="#fff" 
ref="nav_food" 
style={styles.container} 
initialRoute={{ 
component: Food, 
title: ' 美 食 '， 
rightButtonTitle: “地 图 ， 
onRightButtonpress: ()=>{ 
this.refs.nav_ food.navigator.push({ 
title: “地 图 ， 
component: Map, 
passProps:{ 
type:' 餐 饮 ' 
]); 
} 
}} 
/> 


</TabBarI0S.Item> 


<TabBar10S. Item 
title=' 电 影 ' 
selected={this.state.selected === ' 电 影 '} 
icon={require("image!film")} 
onPpress={()=>{this.setState({selected: ' 电 影 '})}}> 
<NavigatorIOS 
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style={styles.container} 
barTintColor="#007AFF" 
titleTextColor="#fff" 
tintColor="#fff" 
ref="nav film" 
initialRoute={{ 
component: Film, 
title: ' 电 影 '， 
rightButtonTitle: “地 图 ， 
onRightButtonpress: ()=>{ 
this.refs.nav film.navigator.push({ 
title: ' 地 图 '， 
component: Map, 
passProps:{ 
type:' 电 影院 ' 


}); 
} 


}} 
仿 


</TabBarIOS .Item> 


“TabBarIOS .Item 
title= 银行” 
selected={this.state.selected === “银行 '} 
icon={require("image!bank")} 
onPress={()=>{this.setState({selected: ' 银 行 '})}}> 
<NavigatorIOS 

style={styles.container} 
barTintColor="#007AFF" 
titleTextColor="#fff" 
tintColor="#fff 
ref="nav_bank" 
initialRoute={{ 

component: Bank, 

title: ' 银 行 '， 

rightButtonTitle: “地 图 ， 

onRightButtonpress: ()=>{ 
this.refs.nav_ bank.navigator.push({ 

title: “地 图 '， 
component: Map， 
passProps:{ 

: type: 银行 


})); 
} 


/> 
</TabBarIOS .Item> 


“TabBarIOS .Item 
title=' 卫 生 间 " 
selected={this.state.selected === ' 卫 生 间 '} 
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icon={require("image!toilet")} 
onpress={()=>{this.setState({selected: ' 卫 生 间 '})}}> 
<NavigatorIOS 

style={styles.container} 

barTintColor="#007AFF" 

titleTextColor="#fff" 

tintColor="#fff" 

ref="nav toilet" 

initialRoute={{ 
component: Toilet, 
title: ' 卫 生 间 '， 
rightButtonTitle: “地 图 ， 
onRightButtonpress: ()=>{ 

this.refs.nav toilet.navigator.push({ 
title: “地 图 ， 
component: Map, 
passProps:{ 


type: 厕所 
]) 
} 
二 
/> 
</TabBarIOS .Item> 
</TabBarIOS> 
</View> 
多 
1 
1 


var styles = StyleSheet.create({ 
container: { 
flex: 1 
} 
]); 


module.exports = Nearby; 


这 里 我 们 定义 了 _GE0_0PEN， 表 示 是 否 开启 真实 定位 。 因 为 模拟 器 无 法 真实 地 模拟 用 户 位 置 ， 
所 以 在 模拟 器 中 调试 时 使 用 GE0 TEST_P0S = '121.390686,31.213976' 模拟 定位。 我 们 使 用 
StatusBarI0S.setStyle('1ight-content ') 将 App 的 状态 栏 设 置 为 白色 ， 这 样 在 导航 栏 为 深 色 时 ， 
能 够 高 亮 显 示 手 机 的 状态 。StatusBarI05.setNetworkActivityIndicatorVisible(true) 表 示 开 启 
手机 网 络 状态 ， 如 果 网 络 状 态 不 佳 ， 则 会 出 现 loading 的 效果 。 此 外 ， 我 们 会 使 用 TabBarIOS.Item 
表现 每 一 个 tab 项 。TabBarIOS.Item 使 用 的 图 标 可 以 到 https:/github.com/vczero/React-Native- 
App/tree/master/pic/nearby 下 载 ， 然 后 在 Xcode 中 将 bank.png、film.png、food.png、toilet.png 拖 忠 进 
Images.xcassets 中 ， 如 图 9-4 所 示 。 
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@@e@ > 天 闪 nearby ) 本 iPhone 5s Indexing | Processing files 


自 定 A 9 于 已 时 | 昭 |< 回 nearby ) 剧 | nearby ) 天 Images.xcassets 〉No Selection 


Applcon 
锣 bank | 
名 flm 


加 nea 
= 1 target, iOS SDK 8.4 
Tv nearby 
_ | main.jsbundle 
h AppDelegate.h 
m AppDelegate.m 
Ba Images.xcassets 


息 food 
国 toilet 


攻 Info.plist 
本 LaunchScreen.xib 
m main.m 

> JE Libraries 

bp MN nearbyTests 

> Ml Products 


图 9-4 ”图 标 资源 


我 们 在 getInitialstate 中 默认 加 载 “美食 ”Tab 项 ， 即 将 this.state.selected 的 默认 值 设 
置 为 “美食 ”。 当 用 户 触发 TabBarIOS.Item 的 onPress 事 件 时 ， 使 用 this.setState({selected: ， 
当前 Tab 的 值 '})} 设 置 为 当前 点 击 Tab 的 标题 。 通 过 selected={this.state.selected === ' 当 前 Tab 
的 值 '} 可 以 判断 该 Tab 是 否 被 选中 。 每 一 个 TabBarIOS.Item 加 载 一 个 NavigatorIOS 组 件 ， 这 样 每 
一 个 Tab 都 是 单独 的 路 由 。 在 NavigatorIOS 组 件 上 设置 导航 栏 的 背景 颜色 为 蓝 色 、 字 体 为 白色 。 
同时 ， 我 们 使 用 了 ref。 当 点 击 初始 化 后 的 导航 栏 的 右 侧 “地 图 ”字样 时 ， 使 用 this.refs.ref 
名 称 .navigator.push 来 加 载 地 图 WebView ， 展 示 列 表 中 每 一 项 在 地 图 上 的 位 置 。 


9.3 ”列表 组 件 开发 


在 App 中 , 列表 组 件 十 分 常见 。 因 为 我 们 最 多 显示 10 条 数据 , 所 以 开发 简单 的 列表 组 件 即 可 。 
如 果 需 要 使 用 ListView 组 件 ， 可 以 参考 10.4 节 。 


9.3.1 通用 列表 组 件 开发 


现在 来 开发 列表 组 件 ， 我 们 希望 列表 组 件 能 够 承载 更 多 的 功能 。4 个 功能 ( 和 餐饮、 电影、 银 
行 、 卫 生 间 ) 列表 都 基于 该 组 件 。 我 们 在 Nearby/views/list.js 中 添加 如 下 代码 : 


Var React = require('react-native'); 

var Geolocation = require('Geolocation'); 
Var Uti = require('./util'); 

var Detail = require('./detail'); 


var { 
View, 
ScrollView, 
Text， 
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StyleSheet, 
TextInput, 
ActivityIndicatorIOS， 
TouchableOpacity, 
LinkingIOS， 
Action9SheetI09， 
WebView, 
AsyncStorage 

} = React; 


var List = React.createClass({ 
getInitialState: function() { 
return { 
list: null, 
count: 0， 
keywords: 
}; 
}, 
render: function(){ 
var items = []; 
if(this.state.1ist){ 
var len = this.state.list.length > 10 ? 10 : this.state.list.length; 
for(var i = 0; i < len; i++){ 
var obj = this.state.1ist[i]; 
items.push( 
<TouchableOpacity style={styles.item} 
onpress={this. loadDetail.bind(this, obj.id, obj.name)}> 
<View style={styles.row}> 
<View style={{flex:1}}> 
<Text numberOfLines={ 
<Text numberOfLines={ 
</View> 
<View style={styles.distance}> 
<Text numberOfLines={1} style={[styles.mi, {color:'#4C4C4C' }]}> 
{obj.distance} 米 


tyle={styles.name}>{obj.name}</Text> 


} 
} style={styles.type}>{obj.type}</Text> 


no 


</Text> 
<Text numberOfLines={1} style={styles.address}>{o0bj.address}</Text> 
</View> 
</View> 
{ 
obj.tel.length ? 

(<TouchableOpacity style={styles.phone} 
onpress={this. call.bind(this, obj.tel)}> 
<Text number0fLines={1} > 电话 </Text> 

</TouchableOpacity>) 

:null 

} 
</TouchableOpacity> 
); 
. 
} 
var placeholder = ' 搜 索 ' + this.props.type; 
return ( 
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<ScrollView style={styles.container}> 
<View style={styles.searchBg}> 
<TextInput style={styles.input} placeholder={placeholder} 
onChangeText={this. onChangeText} 
onEndEditing={this. onEndEditing}/> 
<View> 
<Text style={styles.tip}> 
已 为 您 第 选 
<Text style={{color: '#FA2530'}}>{this.state.count}</Text> 
条 数据 
</Text> 
</View> 
</View> 
{items} 
{items.length? null : <View style={styles.activity}> 
<ActivityIndicatorIOS color="#248BFD"/></View>} 
<View style={{height:40}}></View> 
</ScrollView> 
); 
}, 
ComponentDidMount : 
var that = this; 
Geolocation.getCurrentPosition(function(data){ 
var lnglat = data.coords.longitude + ',' + data.coords.1atitude; 
AsyncStorage.setItem('pos', lnglat); 
var url = Util.searchURL + 'key=' + Util.amapKey + '&keywords=" 
+ that.props.type + '&extensions=base'; 
if(_GEO OPEN){ 
Url += '&location=' + lnglat; 
that. doGetData(url); 
}else{ 
url 
that 


function(){ 


+= “8&location=' + GEO TEST POS; 
.doGetData(url); 


} 


}, function(err){ 
alert(' 定 位 失败 ， 请 重新 开启 应 用 定位 '); 


_doGetData: function(url){ 
that = this; 
.getJSON(url, function(data){ 
if(data.status 8& data.info === 'OK'){ 
var count = data.pois.length > 10? 10: data.pois.1length; 
that. addStorage(data); 
that.setState({ 
list: data.pois, 
count: count 
})); 
}else{ 
alert(' 没 有 查询 到 相应 的 数据 '); 


DD: 
}, 
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/# 加 载 详情 页 */ 
_loadDetail: function(id, name){ 
this.props.nav.push({ 
component: Detail, 
title: name, 
passProps:{ 
id: id 


上 
入 


_onChangeText: function(val){ 
this.setState({ 

keywords: val 

)); 


外 
_onEndEditing: function(){ 


var that = this; 
var keywords = this.state.keywords 
Var url = Util.searchURL + 'key='" + Util.amapKey + '&keywords=" 
+ keywords + '&types=' + that.props.type + '&extensions=base'; 
that.setState({ 
list: null 
}); 
AsyncStorage.getItem('pos', function(err, result){ 
if(_GEO OPEN){ 
if( lerr){ 
Url += '&location=' + result; 
that. doGetData(url); 
}else{ 
alert(' 定 位 失败 '); 
} 


}else{ 
Url += '&location=' + GEO TEST POS; 
that. doGetData(url); 


5 
}; 


// 添 加 到 本 地 存储 

_addStorage: function(data){ 
var posArr = []; 
var len = data.pois.length > 10? 10: data.pois.1length; 
for(var i = 0; i < len; i++){ 

posArr.push(data.pois[i].location); 

} 
var posStr = posArr.join(','); 
AsyncStorage.setItem(' ' + this.props.type , posStr); 


2 


// 拨 打 电 话 
_call: function(tel){ 
if(tel.length){ 
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var arT = tel.split(';'); 

var BUTTONS = []; 

for(var i in arr){ 
BUTTONS .push(arr[i]); 

} 


BUTTONS.push(' 取 消 '); 


ActionSheetI0S. showActionSheetWithOptions({ 
options: BUTTONS, 
cancelButtonIndex: BUTTONS.length - 1 
}, function(index){ 
arr[index] && LinkingIOS.openURL('tel://' + arr[index]); 
}); 
}else 
alert(' 没 有 提供 号 码 '); 
} 


}); 


var styles = StyleSheet.create({ 

container:{ 
flex:1， 
backgroundColor: #ddd 

}， 

input:{ 
height:38, 
marginLeft:10, 
marginRight:10, 
borderWidth:Util.pixel, 
paddingLeft:5, 
marginTop:10, 
borderColor: '#868687', 
borderRadius:3, 
fontSize:15 

】， 

tip:{ 
fontSize:12, 
marginLeft:10, 
marginTop:5, 
color: '#505050" 

}， 

row:{ 
flexDirection:'row', 
marginLeft:10, 
marginRight:10, 
marginTop:10, 
paddingTop:5 

}， 

distance:{ 
width:120, 
alignItems:'flex-end', 

}， 


name:{ 
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fontSize:15, 
marginBottom:6 

]， 

type:{ 
fontSize:12, 
color: '#686868" 

}, 

mi:{ 
fontSize:12, 
color: '#686868" 

}) 

address:{ 
fontSize:12, 
marginTop:5, 
color: '#686868" 

}) 

phone:{ 
marginLeft:10, 
marginRight:10, 
height:30, 
marginTop:10, 
justifyContent:'center', 
alignItems:'center', 
borderWidth:Util.pixel, 
borderColor: '#ccc', 
borderRadius:2, 

]， 

searchBg:{ 
backgroundColor: '#fff", 
paddingBottom:10 

}, 

item:{ 
marginTop:10, 
backgroundColor: '#fff", 
paddingBottom:10， 
borderTopWidth:Util.pixel, 
borderBottomWidth:Util.pixel, 
borderColor: '#ccc' 

]， 

activity:{ 
marginTop:50, 
justifyContent:'center', 
alignItems:'center', 

} 

]) 


module.exports = List; 


这 里 我 们 加 载 的 是 Geolocation API， 这 


由 


样 就 可 以 获取 到 用 户 的 位 置 。 然 后 在 componentDid- 


Mount 中 获取 用 户 位 置 并 存储 到 AsyncStorage 中 : 


componentDidMount: function(){ 
var that = this; 
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Geolocation.getCurrentPosition(function(data){ 
var lnglat = data.coords.longitude + ',' + data.coords.1atitude; 
AsyncStorage.setItem('pos', lnglat); 
var url = Util.searchURL + 'key=' + Util.amapKey + '&keywords=" 
+ that.props.type + '&extensions=base'; 
if(_GEO OPEN){ 
url += '&location=' + lnglat; 
that. doGetData(url); 


Url += '&location=' + GEO TEST POS; 
that. doGetData(url); 


}, function(err){ 

alert(' 定 位 失败 ， 请 重新 开启 应 用 定位 '); 
}); 
} 


我 们 可 以 看 到 这 里 使 用 了 Geolocation.getCurrentPosition 来 获取 用 户 当 前 的 位 置信 息 。 我 
们 将 位 置信 息 拼 接 成 服务 请 求 的 URL 串 。 如 果 是 模拟 器 环境 ， 则 模拟 定位 ; 如 果 是 真 机 环境 ， 则 
使 用 真实 的 定位 信息 。 我 们 将 ur1 传 递 给 doGetData 函 数 来 获取 服务 返回 的 数据 ， 其 代码 如 下 : 


_doGetData: function(url){ 

var that = this; 

Util.getJSON(url, function(data){ 

if(data.status && data.info === 'OK'){ 

var count = data.pois.length > 10? 10: data.pois.length,; 
that. addStorage(data); 
that.setState({ 
list: data.pois, 
count: count 
})); 
}else{ 

alert(' 没 有 查询 到 相应 的 数据 ' ); 


在 上 述 代码 中 ，_doGetData 调 用 了 我 们 在 Uti1 中 封装 的 getJSON 方 法 , 返回 最 多 10 条 数据 。 我 
们 使 用 _ addstorage 函 数 将 返回 的 数据 添加 到 AsyncStorage 中 。 同 时 设置 显示 的 列表 数据 为 
data.pois (兴趣 点 )， 以 及 设置 了 多 少 条 数据 结果 。 之 所 以 将 返回 的 数据 添加 到 AsyncStorage 中 ， 
是 为 了 在 地 图 显示 之 前 方便 取 到 列表 的 数据 集 。 

同时 , 我 们 封装 了 _call 方 法 , 使 用 LinkingI05.openURL('tel:// 电话 号 码 ' ) 来 呼 起 系统 的 拨 
号 功能 。 

为 了 获得 更 好 的 用 户 体验 ， 我们 开发 了 搜索 功能 。 在 用 户 结束 输入 框 输入 时 ( 即 onEnd- 
Editing ) 发 起 请 求 ， 更 新 数据 存储 和 视图 泻 染 ; 


_onEndEditing: function(){ 
var that = this; 
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var keywords = this.state.keywords; 
var url = Util.searchURL + 'key=' + Util.amapKey + '&keywords=" 


+ keywords + '&types=' + that.props.type + '&extensions=base'; 
that.setState({ 


list: null 
]); 
AsyncStorage.getItem('pos', function(err, result){ 
if(_GEO OPEN){ 
if(lerr){ 
url += '&location=' + result; 
that. doGetData(url); 
}elsef{ 
alert(' 定 位 失败 '); 
} 
}else{ 
Url += '&location=' + GEO TEST POS,; 
that. doGetData(url); 


))s 
} 


上 述 代码 使 用 了 AsyncStorage 来 获取 用 户 当 前 的 位 置信 息 ， 这 样 就 不 用 重复 定位 了 。 在 
_onEndEditing 方 法 中 ， 将 拼接 的 新 服务 URL 串 传递 给 doGetData 方 法 ， 从 而 更 新 存储 和 视图 。 


我 们 通过 传递 nav 属 性 获取 navigator 对 象 , 这 样 就 可 以 加 载 详情 页 ， 具 体 代 码 如 loadDetail 
方法 所 示 : 


/* 加 载 详情 页 */ 
_loadDetail: function(id, name){ 
this.props.nav.push({ 
component: Detail, 
title: name, 
passProps:{ 
id: id 


}); 
} 


在 _loadDetail 方 法 中 , id 表示 POIID， 即 点 击 列表 中 某 一 项 的 ID， 这 样 我 们 就 可 以 在 列表 页 
通过 ID 来 查询 该 兴趣 点 的 详情 。 


9.3.2 ”完成 列表 页 


目前 ,我 们 已 经 完成 了 通用 列表 组 件 。 现 在 需要 将 通用 列表 组 件 应 用 到 “美食 *、“ 电 影 ”、 
“银行 ”和 “卫生 间 ” 这 4 个 功能 列表 中 。 
1 美食 "模块 


我 们 加 载 列 表 组 件 ， 即 require(' ./1list')， 然 后 创建 Food 组 件 。Food 组 件 主要 是 传递 type 
和 navigator。 这 样 ， 当 加 载 Food 模 块 时 ， 就 会 请 求 附 近 的 “餐饮 ”信息 。“ 美 食 ” 模 块 的 代码 在 
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Nearby/views/food.js 文 件 中 ， 其 内 容 如 下 : 


Var React = require('react-native'); 
var List = require('./list'); 
var Food = React.createClass({ 
render: function(){ 
return( 
<List type=" 餐 饮 ”nav={this.props.navigator}/> 
); 
} 
]); 


module.exports = Food; 
“美食 ”列表 的 效果 如 图 9-5 所 示 。 

2. “电影 ”模块 

同样 ，Nearby/views/film.js 是 电影 模块 ， 其 代码 如 下 : 


Var React = require('react-native'); 
var List = require('./list'); 
var Film = React.createClass({ 
render: function(){ 
return( 
<List type=" 电 影院 ”nav={this.props.navigator}/> 
); 
} 
]); 


module.exports = Film; 
电影 ”列表 的 效果 如 图 9-6 所 示 。 

3. “银行 ”模块 

同样 ，Nearby/views/bank.js 是 银行 模块 ， 其 代码 如 下 : 


‘ 


var React = require('react-native'); 
var List = require('./list'); 
var Bank = React.createClass({ 
render: function(){ 
return( 
<List type=" 银 行 "” nav={this.props.navigator}/> 


说 
} 
有 


module.exports = Bank; 
“银行 ”列表 的 效果 如 图 9-7 所 示 。 

4. “卫生 间 ” 模 块 

同样 ，Nearby/views/toilet.js 是 卫生 间 模 块 ， 其 代码 如 下 : 


var React = require('react-native'); 
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eeeeo 中 国联 通 3G 冯 20:38 


已 为 您 第 选 10 条 数据 


川 湘 本 色 ( 南 站 幸福 路 ) a 
余人 饮 服务 ;中 餐厅 ;中 父 厅 光宗 国 SE 太志 对 加 


久久 著 王 ( 悦 秀城 店 ) 
餐饮 服务 ;中 餐厅 ;中 餐厅 开 阴 路 8 吕 悦 吕 城 6 层 


Gazan 雅 山地 道中 式 料 理 .… 71 米 
餐饮 服务 ;中 餐厅 ;中 餐厅 开 阳 路 8 号 悦 秀城 F6 层 


倪 大 厨 吃 货 de 饭 堂 91 米 
餐饮 服务 ;中 餐厅 ;中 餐厅 开 阳 路 8 号 悦 秀城 6… 


2 


了 生 间 


“美食 ”列表 


seeeo 中 国联 通 3G :六 20:37 


已 为 您 第 选 10 条 数据 

保利 国际 影 城 ( 首 地 大 峡 … 1708 米 

体育 休闲 服务 ;影剧院 ;电影 院 南 三 环 西 路 16 号 F5 层 
电话 

保利 国际 影 城 (大 峡谷 店 ) 1729 米 

体育 休闲 服务 ;影剧院 ;电影 院 南 三 环 西 路 16 号 1 号 … 
电话 

POLY MAX 1731 米 


体言 休闲 服务 :影剧院 :电影 院 ”。 马 家 堡 街道 首 地 大 峡 … 


外 罗 国 国 


美食 电影 银行 卫生 间 


图 9-6 “电影 ”列表 
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var List = require('./list'); 
var Toilet = React.createClass({ 
render: function(){ 
return( 
<List type=" 布 所 "nav={this.props.navigator}/> 


了》 


})); 


module.exports = Toilet; 


“了 卫生间” 列表 的 效果 如 图 9-8 所 示 。 


seeeo 中 国联 通 3G ;20:37 @ [ss seeeo 中 国联 通 3G ;= 20:37 


卫生 间 


已 为 您 第 选 10 条 数据 已 为 您 第 选 10 条 数据 

中 信和 银行 ATM( 开 阳 路 ) 215 米 公共 厕所 70 米 
金融 保险 服务 :自动 提 款 机 :中 信 :… 永定 门 外 大 街 北京 南 … 公共 设施 ;公共 厕所 ;公共 布 所 龙 爪 槐 胡同 6 陶然 湖 … 
北京 银行 ATM 222 米 公共 厕所 80 米 


金融 保险 服务 ;自动 提 款 机 :自动 … 永定 门 外 大 街 北京 南 … 公共 设施 ;公共 厕所 :公共 而 所。 南 站 垃 福 路 和 辛 福 四 一 


中 国民 生 银 行 ATM 222 米 肯德基 (北京 南 站 三 餐厅 )-… 150 米 

金融 保险 服务 ;自动 提 款 机 ;自动 … 永定 门 外 大 街 北京 南 … 公共 设施 ;公共 出所 ;公共 出所 。 ” 开 阳 路 北京 南 站 高 架 … 

中 国 银行 ATM( 北 京 南 站 ) 228 米 公共 厕所 (北京 南 站 ) 155 米 

金融 保险 服务 ;自动 提 款 机 :中 国 … ”” 永 外 大 街 12 号 B1 层 公共 设施 ;公共 厕所 ;公共 出 所 永 外 大 街 12 号 F2 层 

美食 电影 银行 卫生 间 美食 电影 银行 卫生 间 
图 9-7 “银行 ”列表 图 9-8 “卫生 间 ” 列 表 


9.4 详情 页 组 件 开发 


详情 页 组 件 比 较 简单 , 这 里 只 是 简单 展示 了 一 些 详情 信息 ,相关 代码 在 Nearby/views/detail.js 
文件 中 ， 其 内 容 如 下 : 


var React = require('react-native'); 
var Util = require('./util'); 


var { 
View, 
ScrollView, 
Text， 
StyleSheet, 
TextInput, 
ActivityIndicatorIOS， 
TouchableOpacity 

} = React; 
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var FoodDetail = React.createClass({ 
getInitialState: function(){ 
return{ 
data: null 
}; 


}, 
render: function(){ 
return ( 
<ScrollView> 
{this.state.data? 
<View style={styles.content}> 
<Text style={styles.name}>{this. state.data.name}</Text> 
<Text style={styles.types}> 
类 型 : 
{this. state.data.type} 
</Text> 
<Text style={styles.address}> 
地 址 : 
{this.state.data.address} 
</Text> 
<Text style={styles.tag}> 
标签 : 
{this. state. data. tag} 
</Text> 
<Text style={styles.server}> 
服务 : 
{this.state.data. server} 
</Text> 
</View> 
:null} 
</ScrollView> 
); 
}, 


componentDidMount: function(){ 
var that = this; 
var url = Util.detailURL + 'key=' + Util.amapKey + '&id=" 
+ this.props.id + '&extensions=all'; 
Util.getJSON(url, function(data){ 
if(data.status 8& data.info === 'OK' &&8 data.pois.length){ 
var obj = data.pois[0]; 
if(obj.deep info 8& obj.deep info.tag){ 
obj.server = obj.deep info.tag; 


} 
that.setState({ 
data: obj 
})); 
}else{ 
alert(' 数 据 服务 出 错 '); 
} 
]); 
} 
]); 


var styles = StyleSheet.create({ 
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container:{ 
flex:1 

)， 

name :{ 
fontSize:15, 
color: '#1D92F5"， 


fontWeight: "boj1d eeeeo 中 国联 通 去 》 21:44 
) 《 美食 上 航 小 夺 
content:{ 
marginLeft:10, 上 航 小 厨 
marginRight:10, 类 型 : 餐饮 服务 ;中 餐厅 ;浙江 菜 
marginTop:10 地 址 : 绥 宁 路 23 号 
》， 标签 : 炸 猪排 牛肉 沙河 粉 ,红烧 狮子 头 ,口水 鸡 , 黑 胡 
椒 牛 排 , 醋 汐 鱼 片 ,海鲜 欧 , 糖 醋 小 排 ,水 者 鱼 
tag:{ 服务 : 
fontSize:13, 
marginTop:10 
}), 
types:{ 
marginTop:10, 
fontSize:13, 
COlor: '#4C4C4C" 
)， 
address:{ 
fontSize:13, 
COlor: '#4C4C4C" 
和 人 上 自 昌 
server:{ 本 
marginTop:10, 图 9-9 ”详情 页 
fontSize:13 
} 
}); 


module.exports = FoodDetail; 


在 上 述 代 码 中 ， 我 们 在 componentDidMount 中 获取 传递 过 来 的 id， 然 后 通过 id 来 拼接 请 求 的 
URL 串 ， 最 后 通过 使 用 该 URL 串 来 完成 数据 请 求 。 在 请 求 完 成 的 成 功 回 调 函 数 中 ， 使 用 that. 
setState 来 改变 数据 模型 ， 而 数据 模型 的 改变 触发 视图 的 重新 泻 染 。 详 情 页 的 效果 如 图 9-9 所 示 。 


9.5 WebView 地 图 模块 开发 


我 们 已 经 完成 了 列表 页 和 详情 页 开发 , 现在 需要 将 结果 项 展示 在 地 图 上 , 这 样 用 户 就 能 清楚 
地 知道 每 一 个 POI ( 兴趣 点 ) 的 位 置 。 这 里 我 们 使 用 高 德 地 图 JavaScriptAPI 开 发 HTML5 页 面 ， 然 
后 将 HTMLS 页 面 认 人 React Native WebView 中 。 我 们 需要 和 WebView 协 商 一 个 共同 的 数据 传输 协 
议 ， 这 里 我 们 使 用 URL 人 参数 传 递 参数 。 我 们 协定 的 规则 是 : 


http://xxx/index.html?pos=121.390686,31.213976&markers=121.390686,31.213976,121.390586,31.213976， 
121.350686,31.213976 


在 WebView 中 加 载 地 图 页 面 时 ,传递 参数 pos 和 markers ， 其 中 pos 表 示 当 前 用 户 的 位 置 ， 
markers 表 示 地 图 上 的 点 标记 。Nearby/views/map.js 就 是 地 图 模块 ， 具 体 代码 如 下 : 
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Var React = require('react-native'); 
var { 

View, 

Text， 

WebView, 

AsyncStorage 
} = React; 


var Map = React.createClass({ 
getInitialState: function(){ 
return{ 
url: null 
}; 
ja 
render: function(){ 
var webView = null; 
if(this. state.url){ 
webView = <WebView url={this.state.url}/> 


return( 
<View style={{flex:1}}> 
{webView} 
</View> 
); 
}, 
componentDidMount: function(){ 
var that = this; 
AsyncStorage.multiGet([' _' + that.props.type, 'pos'], function(err, result){ 
if(!lerr){ 
var pos = result[1][1]; 
var markers = Tesult[0][1]; 
var url = 'http://vczero.github.io/webview/index.html?'; 
if(_GEO OPEN){ 


Ur] += 'pos=" + pos + '&markers=" + markers; 
}else{ 
Url] += "pos=' + GEO TEST POS + '&markers=' + markers; 
} 
that.setState({ 
url: url 
)); 
}else{ 
alert(' 定 位 失败 '); 
} 
}); 


} 
)); 
module.exports = Map; 
这 里 我 们 使 用 Asyncstorage.multiGet 获 取 多 个 key 值 , 然后 生成 符合 规则 的 URL, 加 载 HTML 
地 图 页 面 。 


之 所 以 在 9.2.2 节 中 申请 高 德 地 图 JavaScript API， 是 因为 需要 在 HTML 页 面 中 开发 地 图 应 用 。 
这 里 我 们 使 用 申请 的 key 加 载 JavaScript API: 
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<script type="text/javascript" src="http://webapi.amap.com/maps?V=1.3 
akey=6a1180467b5f36714645d22044535ab7"></script> 
<script type="text/javascript"> 


据 所 有 Marker 的 位 置 使 地 图 自 适应 窗口 ， 完 整 代码 如 下 : 


<!DOCTYPE html> 
<html style="width: 100%;height:100%;"> 


<head> 
<meta charset="Utf-8"> 
<meta name="renderer" content="webkit"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-status-bar-style" content="black"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<meta name="apple-mobile-web-app-title” content=" 地 图 "> 


<meta name="viewport" content="width=device-width,initial-scale=1, 
maximum-scale=1,minimum-scale=1,minimal-ui"> 
<meta name="msapplication-tap-highlight" content="no"> 
title> 地 图 </title> 
</head> 
<body style="width: 100%;height:100%;padding:0;margin:0;"> 
<div id="map" style="width: 100%;height:100%;"></div> 
<script type="text/javascript" src="http://webapi.amap.com/maps?V=1.3 
akey=6a1180467b5f36714645d22044535ab7"></script> 
<script type="text/javascript"> 
var Url = window.1location.href; 
var map = new AMap.Map('map',{ 
resizeEnable: true 
]); 
map.setZoom(16); 
var urlParams = url.split('?'); 
if(urlparams.length > 1){ 
var arr = UT1LParams[1].split( "8& ); 
var obj = {}; 
for(var i in arr){ 
var kv = arr[il].split('="); 
obj[kv[o]] = kv[1]; 
} 


// 地 图 居中 
//index.html?pos=121.390686,31.213976 
if(obj["pos"]){ 
var pos = obj["pos"].split(','); 
map.setCenter(new AMap.LngLat(pos[0]，pos[1])); 


信 


让 


} 
// 添 加 Marker 
//index.html?pos=121.390686,31.213976&markers=121.390686， 
//31.213976,121.390586,31.213976,121.350686,31.213976 
if(obj["markers"]){ 
var marks = obj["markers"].split(','); 
var mks = []; 
for(var i = 0; i < marks.length; i++){ 
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并 且 通 过 获取 URL 参 数 来 设置 地 图 上 的 Marker( 地 理 标注 ， 地 图 开发 的 专业 术语 )， 最 后 根 
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主人 ( 汪 % 2 === ){ eeeeo 中 国联 通 3G * 20:38 
1 = new AMap.Marker({ 《 卫生 间 地 图 
a new AMap.LngLat(marks[i], marks[i + 1]) 世纪 家 守 福 二 市 @| 东 庄 小 区 尝 
mks.push(marker); ls j : = 
} 过往 申 旧 
// 根 据点 标记 自 适 应 \ | 
map.setFitView(mks); 本 We 
} 据 久 a 和 妆 E22 3 
} ee 回 a 
</script> 到 后 思 贡 京 南 站 Ea 上 
</body> FF 0 G@Htmm 公信 
老 边 包子 四 (的 东方 既 自 
‘hin 美国 加 州 牛 内 面 由 ”A 
i = po A (由 棒 ! 的 输 
地 图 模块 的 效果 如 图 9-10 所 示 。 坊 德 地 图 "人 有 WE ”多 南 广场 
外 全 思 
过 全 美食 久 银行 卫生 间 
9.6 ”综合 交 
综合 效果 图 9-10 ”地 图 模块 


现在 我 们 已 经 完成 了 “附近 ”这 个 App 的 所 有 功能 ， 其 代码 已 经 提交 到 了 GitHub : 
https://github.com/vczero/React-Native-App， 供 大 家 参考 。 图 9-11 以 “电影 院 ” 为 例 ， 展 示 了 列表 
页 、 详 情 页 和 地 图 。 


是 全 10:34 cL 
电影 世纪 仙 霞 影 城 (百联 西 郊 店 ) 
世纪 仙 霞 影 城 (百联 西 郊 店 ) 
类 型 : 体育 休闲 服务 ;影响 院 : 电 影院 
已 为 钨 第 选 5 条 数据 地 址 : 仙 霞 西 路 88 号 百联 王 郊 狗 物 中 心 
标签: 
数码 影院 [新 泾 镇 文化 中 … 2308 米 。 服务 : 
体育 休闲 服务 ; 影 轩 院 : 电 形 束 福泉 路 405 号 新 泾 镇 
华东 隆 薄 大 学 
V 星 影响 | 2643 米 人 See 位 ae、 
体育 体 亲 服务 影 凤 吴 :电影 这 天 山西 路 138 号 起 邦 i 二 大 贡 订 双人 < 
| ss 
ps)j 汉 县 潭 后 夏 【全 局】 
电话 \ PH 
\ 外 环 最 瞧 续 
Saar TT 
“上 一 全 上 WE 站 的 上 油 近 必 国 慰 机 亏 
世纪 他 霞 影 城 ( 百 联 西 郊 店 ) 2779 米 一 天 和 过 
体育 休闲 服务 影 施 闭 : 志 影 谢 仙 委 看 拓 88 全 再 联 ,i GD 
\ 4 虹 质 铺 
电话 ro ps L \ 
r 中 要 和 LE b 中 覃 t 
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第 8 章 介绍 了 使 用 React Native 和 Node.js 开 发 简单 的 通讯 录 应 用 一 一 百灵 鸟 ， 第 9 章 介 绍 了 基 
于 高 德 地 图 API 开 发 的 “附近 ”App。 在 这 一 章 中 , 我 们 将 介绍 通过 调用 豆瓣 开放 API 开 发 一 款 图 
书 、 电 影 和 音乐 搜索 App 一 一 豆 搜 。 本 书 所 有 实例 的 图 片 均 由 豆瓣 API 提 供 , 版 权 归 豆 办 API 所 有 。 


10.1 豆 办 API 


互联 网 时 代 是 服务 共享 的 时 代 , 调用 开放 平台 的 数据 服务 , 不仅 可 以 整合 大 平台 的 资源 , 还 
可 以 提高 开发 效率 ,也 可 以 节省 服务 器 资源 。 因 此 ,借用 平台 的 优势 ,可 以 帮助 我 们 更 加 快速 地 
拿 到 资源 ， 获 取 用 户 。 比 如 ， 开 发 一 款 小 型 的 公众 App， 使 用 新 浪 微 博 的 登录 接口 ， 不 仅 可 以 让 
用 户 觉 得 安全 放心 , 同时 也 增加 了 用 户 量 。 因为 这 样 可 以 避免 用 户 重复 注册 账户 , 节省 用 户 时 间 。 
在 这 一 章 中 ,我 们 使 用 的 是 豆瓣 开放 API。 因 为 豆瓣 在 音乐 、 电影、 图 书 方 面 的 数据 相对 较 全 ， 
所 以 做 一 款 简单 的 App 已 经 足够 了 。 


10.1.1 熟悉 豆 闪 API 


一 般 情况 下 ， 开 放 API 的 调用 是 需要 申请 的 ， 比 如 新 浪 微 博 、 开 源 中 国 、 高 德 地 图 开放 API、 
百度 地 图 API 等 。 这 里 我 们 使 用 的 API 是 搜索 和 详情 服务 ， 所 以 不 涉及 提交 和 修改 等 操作 ， 因 此 
豆 办 也 没有 和 针对 这 些 API 做 权限 限制 。 在 “ 豆 搜 ”App 中 ， 一 共用 到 了 4 个 API 服 务 ， 如 下 所 示 : 


口 图 书 搜索 
口 图 书 详情 
口 电影 搜索 
口 音乐 搜索 

我 们 可 以 在 豆 准 API 官 网 上 ( http://developers.douban.com/wiki/?title=api_v2 ) 看 到 ， 目 前 API 
的 版 本 是 V2.0。 豆 为 建议 大 家 切换 到 2.0 版 本 ， 旧 的 API 不 再 更 新 ， 只 会 维护 。 在 网 站 的 底部 可 以 
看 到 ， 豆 办 开放 API V2.0 提 供 了 不 少 服务 ， 如 图 10-1 所 示 。 
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Api V2 索引 
图 书 Api V2 
电影 Api V2 
音乐 Api V2 
同城 Api V2 
广播 Api V2 
用 户 Api V2 
日 记 Api V2 
相册 Api V2 
线 上 活动 Api V2 
论坛 Api V2 
回复 Api V2 


我 去 Api V2 


图 10-1 ” 豆 淮 API 


10.1.2 图书、 电影 、 音 乐 API 
因为 在 “ 豆 搜 ” 应 用 中 ,我 们 只 用 到 了 图 书 、 电 影 和 音乐 相关 的 服务 ， 所 以 这 里 只 需要 关注 
前 三 项 即 可 。 
1. 图 书 API 
点 击 “ 图 书 Api V2”， 跳 转 到 图 书 API 服 务 列 表 ( http://developers.douban.com/wiki/? 
title=book_v2 )。 这 里 我 们 使 用 的 图 书 服务 是 图 书 搜索 ( 即 图 书 API 服 务 列表 界面 中 的 “搜索 图 书 ”) 
和 图 书 详情 ( 即 图 书 API 服 务 列表 界面 中 的 “获取 图 书信 息 ”)。 
口 图 书 搜索 服务 接口 。 下 面 是 图 书 搜索 服务 的 URL 地 址 : 
请 求 方式 : GET 
服务 地 址 : https://api.douban.com/v2/book/search 
该 服务 的 参数 如 下 。 
q: 表示 查询 关键 字 ，q 和 tag 必 传 其 一 。 
tag: 查询 的 标签 。 
start: 取 结 果 的 offset ( 即 偏 移 量 )， 默 认为 0。 
count: 取 结 果 的 条 数 ， 默 认为 20， 最 大 为 100。 


例如 ， 我 们 可 以 通过 浏览 器 访问 https://api.douban.com/v2/book/search?count=10&q=C 0 


语言 来 获取 关于 C 语 言 查询 图 书 的 数据 。 
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口 图 书 详情 服务 接口 。 下 面 是 图 书 详情 服务 的 URL 地 址 : 


请 求 方式 : GET 
服务 地 址 : https://api.douban.com/v2/book/:id 


该 服务 的 参数 是 id， 即 图 书 的 编号 。 
例如 ， 我 们 可 以 访问 https://api.douban.com/v2/book/1139336 获 取 图 书 的 详细 信息 。 
2. 电影 API 
点 击 “ 电 影 Api V2”， 跳 转 到 电影 API 服 务 列 表 ( http://developers.douban.com/wiki/? 
title=movie v2 )。 这 里 ， 我 们 使 用 的 服务 是 电影 搜索 ， 该 服务 的 接口 如 下 : 


请 求 方式 : GET 
服务 地 址 : https://api.douban.com/v2/movie/search 


该 服务 的 参数 如 下 。 
口 q: 表示 查询 关键 字 ，q 和 tag 必 传 其 一 。 
D tag: 查询 的 标签 。 
口 start: 取 结 果 的 offset ( 即 偏 移 量 )， 默 认为 0。 
D count: 取 结 果 的 条 数 ， 默 认为 20。 
例如 ， 我 们 可 以 访问 https://api.douban.com/v2/movie/search?count=58q= 幸 福来 获取 关于 
电影 关键 字 中 含 “幸福 ”的 数据 。 
3. 音乐 API 
点 击 “ 音 乐 Api V2”， 跳 转 到 音乐 API 服 务 列 表 ( http://developers.douban.com/wiki/? 
title=music_v2 )。 这 里 我 们 使 用 的 是 音乐 搜索 API， 该 服务 接口 如 下 : 


请 求 方式 : GET 
服务 地 址 : https://api.douban.com/v2/music/search 


该 服务 的 参数 如 下 。 
口 q: 表示 查询 关键 字 ，q 和 tag 必 传 其 一 。 
口 tag: 查询 的 标签 。 
口 start: 取 结 果 的 offset ( 即 偏 移 量 )， 默 认为 0。 
口 count: 取 结 果 的 条 数 。 
例如 , 我们 可 以 访问 https://api.douban.com/V2/music/search?count=10&q= 刘 德 华 来 获取 关于 音 
乐 中 含 “ 刘 德 华 ” 的 数据 。 
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10.2 ”应 用 设计 


在 开发 一 款 App 前 ， 我 们 都 需要 设计 和 架构 。 比 如 ， 要 开发 一 个 登录 中 心 ， 就 需要 考虑 登录 
的 客户 端 有 哪些 类 型 、 通 用 的 登录 方式 是 否 行 得 通 、 各 客户 端的 安全 要 素 是 什么 等 问题 。 这 些 问 
题 需要 我 们 在 开发 前 就 设计 好 。 如 果 没 有 设计 和 架构 ,那么 在 多 人 协作 开发 的 情况 下 , 很 可 能 出 
现 沟 通 复 杂 、 代 码 重 复 等 问题 。 因 此 ， 开 发 一 款 App 前 ， 做 一 个 简单 的 架构 和 设计 是 必要 的 。 这 
里 ,“ 豆 搜 ”App 会 从 功能 设计 和 模块 划分 这 两 个 方面 来 介绍 。 


10.2.1 功能 设计 
“ 豆 搜 ”App 是 基于 豆 为 开放 API 开 发 的 ， 功 能 相对 比较 简单 ， 主 要 功能 如 图 10-2 所 示 。 
搜索 功能 
7 列表 页 
详情 页 
搜索 功能 


= 列表 页 
WebView 导 向 豆 准 


搜索 功能 


WebView 导 向 豆 办 


图 10-2 ”功能 模块 


该 App 主 要 包含 3 个 主体 功能 : 图书、 电影 和 音乐 。 这 3 个 主体 功能 都 提供 搜索 ,方便 用 户 检 
索 需 要 的 内 容 。 我 们 需要 将 搜索 的 结果 展示 出 来 ， 因 此 需要 列表 页 功能 。 同 时 ， 在 一 般 情 况 下 ， 
我 们 还 需要 详情 页 。 比 如 ， 要 想 买 一 本 React Native 方 面 的 图 书 ， 我 们 希望 能 够 了 解 更 多 的 信息 ， 
因此 ,“ 图 书 ” 模 块 提 供 了 详情 页 的 功能 。 同时 在 “电影 ”和 “音乐 ”模块 , 我们 提供 了 WebView 
来 展示 电影 和 音乐 的 详情 。 


10.2.2 ”模块 划分 

10.2.1 节 已 经 完成 了 基本 功能 的 勾勒 ， 现 在 需要 搭建 项 目 。 一 般 而 言 ， 为 了 方便 代码 管理 和 
维护 , 通常 的 做 法 是 将 同类 业务 或 者 说 功能 放 在 同一 个 文件 夹 中 。 这样, 模块 划分 比较 明确 , 后 
期 修改 也 较为 方便 。 我 们 搭建 的 项 目 结构 如 图 10-3 所 示 。 
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douApp (~/work/github/React-Dou/douApp) 


pb Dandroid 

pb Dios 

了 DiOS views 
了 Dbook 


WW book_detail.js 
lS book_item.js 
男 book_listjs 
了 Dcommon 
ws header.js 
态 left_icon.js 
男 navigation.js 
中 search.js 
是 service.js 
ws util.js 
webview.js 
vv Dmovie 
王 movie.js 
vv Dmusic 
lS music.js 
pb node_modules (library home) 
a] .flowconfig 
今 .gitignore 
a) .watchmanconfig 
ws index.android.js 
ws index.ios.js 
wo package.json 


图 10-3 ”项 目 结构 


该 项 目 是 基于 ReactNative iOS 开 发 的 ,因此 index.ios.js 是 入 口 文件 。iOS _views 是 功能 模块 的 
主体 文件 夹 ，common 是 公共 组 件 和 功能 的 文件 夹 ，book 是 图 书 功能 的 文件 夹 ，movie 和 mnusic 分 
别 是 电影 和 音乐 功能 模块 的 文件 夹 。 其 中 每 个 文件 的 功能 如 下 。 


口 book_detailjs: 图 书 详情 页 组 件 ， 它 调用 了 book_items.js 模 块 。 

口 book_items.js: 图 书 列表 项 ， 供 图 书 列 表 组 件 和 图 书 详情 页 组 件 调用 。 

口 book_listjs: 图 书 列表 组 件 ， 它 调用 了 search.js 模 块 和 header.js 模 块 。 

口 headerjs: 公共 导航 头 ， 供 列表 组 件 调 用 。 

D left_icon.js: 公共 导航 头 中 的 回 退 网 标 。 

DO navigation.js: 封装 Navigator， 暴 露 passProps 属 性 。 

口 search.js: 搜索 框 组 件 。 

口 service.js: 服务 URL 模 块 。 

D utiljs: 工具 类 模块 ， 主 要 包含 屏幕 尺寸 、 公 共 loading 组 件 、GET 请 求 等 属性 和 方法 。 
口 webviewjs: 该 组 件 在 React Native WebView 组 件 的 基础 上 做 了 进一步 封装 ， 添 加 了 头 部 。 
这 样 用 户 可 以 使 用 头 部 回 退 按钮 ， 从 WebView 回 退 到 Native App。 

口 movie.js: 电影 列表 组 件 。 

D musicjs: 音乐 列表 组 件 。 
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10.3 ”公共 模块 开发 


在 前 两 节 中 , 我 们 已 经 做 了 功能 的 勾勒 和 模块 的 划分 , 现在 只 需要 按照 既定 的 方案 进行 开发 
即 可 。 首先 , 需要 完成 公共 模块 的 开发 。 因 为 工具 类 和 公共 模块 是 业务 开发 的 基础 。 公 共 模 块 对 
应 图 10-3 中 的 common 文 件 夹 。 因为 工具 类 模块 是 一 个 文件 , 这 里 我 们 将 其 放 进 了 common 文 件 夹 ， 
作为 公共 模块 的 一 部 分 。 


10.3.1 工具 类 开发 


在 工具 类 中 ， 我 们 希望 有 4 个 功能 和 属性 是 可 以 暴露 给 业务 开发 使 用 的 。 很 多 时 候 ， 我 们 需 
要 根据 设备 的 像素 密度 获取 最 小 线 宽 ， 此 时 可 以 使 用 PixelRatio.get()。 同 时 ， 在 有 些 情况 下 ， 
我 们 需要 拿 到 当前 屏幕 的 宽 高 ， 此 时 可 以 使 用 Dimensions.get('window' )。 相 关 代码 在 common/ 
utiljs 文 件 中 ， 有 具体 如 下 : 


/4 
* 

* Uti] 模 块 工具 类 

* 主要 提供 工具 方法 

* 

*/ 

Var React = require('react-native'); 
var Dimensions = require('Dimensions'); 


i 


var { 
PixelRatio, 
ActivityIndicatorIO9 
} = React; 


module.exports = { 
/* 最 小 线 宽 */ 
pixel: 1 / PixelRatio.get(), 


/* 屏 幕 尺寸 */ 
size: { 
width: Dimensions.get('window' ) .width, 
height: Dimensions.get('window').height 
}, 
/** 
* 基于 fetch 的 get 方 法 
* @method post 
* @param {string} url 
* @param {function} callback 请 求 成 功 回调 
*/ 
get: function(url, successCallback, failCallback){ 
fetch(url) 
.then((response) => response.text()) 
.then((responseText) => { 
successCallback(JSON.parse(responseText)); 
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.catch(function(err){ 


failCallback(err); 


) 


/*loading 效 果 */ 
loading: 《ActivityIndicatorIOS color="#3EOOFF" 


sty] 
}; 


e={{marginTop:40,marginLeft:Dimensions.get('window' ).width/2-10}}/> 


这 里 我 们 在 fetch 的 基础 上 做 了 一 个 简单 的 GET 方 法 的 封装 。 该 方法 需要 传递 三 个 参数 ， 第 
个 是 请 求 的 服务 地 址 , 第 二 个 参数 是 成 功 的 回调 函数 , 第 三 个 是 失败 的 回调 函数 。 如 果 请 求 成 
功 ， 则 将 获取 的 数据 转 为 JSON 格 式 并 传递 给 成 功 回 调 函 数 ; 如 果 请 求 失 败 ， 则 将 错误 信息 传 给 


失败 的 回调 也 


数 。 在 utiljs 模 块 中 ， 还 提供 了 一 个 简单 的 loading 组 件 ， 方便 展 示 loading 效 果 。 


10.3.2 ”服务 列表 


“ 豆 搜 ” 


App 调 用 的 是 豆 狼 的 开放 API。 为 了 方便 管理 这 些 服务 接口 ,我 们 将 它们 放置 在 一 个 


文件 中 ， 即 common/service.js， 有 具体 的 内 容 如 下 : 


AL 
* 


* 服务 URL 
* 基于 豆 办 开放 API 的 图 书 、 音 乐 和 电影 服务 
* 如 果 https://api.douban.com/v2/ 都 保持 不 变 ， 则 可 以 将 其 设置 为 BaseURL 


下 


module.exports = { 
// 图 书 搜索 
book search: 'https://api.douban.com/v2/book/search', 
// 图 书 详情 
book search id: 'https://api.douban.com/v2/book/', 
// 音 乐 搜索 


music 


_search: 'https://api.douban.com/v2/music/search’', 


// 音 乐 详情 


music 


search id: 'https://api.douban.com/v2/music/', 


// 电 影 搜索 

movie search: 'https://api.douban.com/v2/movie/search', 

// 电 影 详 情 

movie search id: 'https://api.douban.com/v2/movie/subject/" 
}; 


这 样 我 们 在 开发 过 程 中 就 不 要 过 多 关心 服务 地 址 , 只 需要 service.book_search 的 形式 调用 即 
可 。 以 后 ， 如 果 服 务 地 址 改变 ， 也 只 用 在 该 文件 中 修改 即 可 。 其 实 如 果 https://api.douban.conyv2/ 
保持 不 变 ， 我们 可 以 定义 BaseURL， 即 var BaseURL = 'https://api.douban.com/v2/';， 然 后 在 服 
务 地 址 中 拼接 即 可 。 
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10.3.3 ” Navigator 封装 


React Native 提 供 了 两 个 导航 栏 组 件 ， 一 个 是 NavigatorIOS ， 一 个 是 Navigator。NavigatorIOS 
的 封装 程度 更 高 , 提供 了 基础 的 API 和 属性 , 开发 者 简单 定制 就 可 以 开发 一 个 功能 丰富 的 导航 栏 。 
而 Navigator 相 对 比较 简陋 ， 正 是 这 种 简陋 ,， 才 给 了 开发 者 足够 的 空间 去 定制 。 所 以 说 ，Navigator 
的 定制 能 力 要 高 于 NavigatorIOS。 如 果 是 复杂 的 导航 栏 , 我 们 完全 可 以 采用 Navigator。 在 第 8 章 和 
第 9 章 中 , 都 是 使 用 NavigatorIOS 作 为 导航 栏 组 件 , 在 这 一 章 中 , 我 们 将 使 用 Navigator 定 制 简 单 的 
导航 栏 组 件 。 


这 里 我 们 封装 了 简单 的 common/navigation.js 组 件 ， 具 体 代 码 如 下 : 


| 
* 


* 封装 Navigator 
* 所 有 的 切换 过 场 动画 都 是 从 底部 往 上 ， 回 退 是 从 上 往 下 
* 这 里 需要 注意 的 是 使 用 {...Toute.passProps} 模 仿 NavigatorI0S 的 passProps 
eh 
Var React = require('react-native'); 
var { 
StyleSheet, 
Text， 
View, 
Navigator 
} = React; 


module.exports = React.createClass({ 
render: function(){ 
return( 
<Navigator 
initialRoute={{name: '', component: this.props.component, index:0}} 
configureScene={()=>{return Navigator.SceneConfigs.FloatFromBottom;}} 
renderScene={ (route, navigator) => { 
const Component = route.component,; 
return ( 
<View style={{flex: 1}}> 
<Component navigator={navigator} route={route} {...route.passProps}/> 
</View> 
); 
}}/> 


]); 


在 上 述 代 码 中 ， 我 们 在 initialRoute 中 传递 了 component ， 即 this.props.component， 这 样 初 
始 化 Navigation 组 件 时 ， 即 可 传递 入 口 组 件 。 同 时 ,我 们 使 用 了 {.. .route.passProps}。 这 样 做 的 
好 处 有 两 个 : 第 一 个 就 是 可 以 使 用 passProps 属 性 ,保持 和 NavigatorIOS 一 样 的 接口 ; 第 二 个 就 是 
可 以 扩展 更 多 的 属性 。 
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10.3.4 ”公共 头 封装 


在 一 款 App 中 ， 头 部 通常 是 必 不 可 少 的 ， 这 里 我 们 使 用 的 是 定制 的 头 部 ， 其 效果 如 图 10-4 
所 示 。 


《 图 书 C 程 序 设计 语言 


10-4“ 头 部 效果 


该 头 部 组 件 可 以 分 为 两 个 部 分 ， 一 个 回 退 按钮 ， 一 个 是 标题 。 首 先 ， 开 发 回 退 按钮 组 件 ， 即 
common/left icon.js， 具 体 代 码 如 下 : 


var React = require('react-native'); 
var Util = require('./util'); 


var { 
StyleSheet, 
Text， 
View 

} = React; 


module.exports = React.createClass({ 
render: function(){ 


return ( 
<View> 
<View style={styles.go}> 
</View> 
</View> 
) ; 
} 
]); 


var styles = StyleSheet.create({ 
go:{ 
borderlLeftWidth: 4 * Util.pixel, 
borderBottomWidth: 4 * Util.pixel, 
width:15, 
height:15, 
transform: [{rotate: '45deg'}], 
borderColor: '#FFF', 
marginLeft:10 
} 
}); 


这 里 我 们 使 用 了 transform: [{rotate: '45deg'}] 将 一 个 矩形 框 旋转 了 45 度 ， 并 且 设 置 左 边 
框 和 底 边 框 的 宽度 为 4 个 像素 。 这 样 ， 在 蓝 色 为 底 色 的 头 部 中 ， 就 会 显示 一 个 < 图 标 。 


接着 完成 头 部 组 件 的 主体 部 分 ， 即 common/header.js。 在 header.js 模 块 中 ， 我 们 会 调用 回 退 按 
钮 组 件 ， 具 体 代 码 如 下 : 
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var React = require('react-native'); 
var Icon = require('./left icon'); 
var Uti = require('./../common/util'); 


var { 
StyleSheet, 
Text， 
View, 
ListView, 
Image, 
ScrollView, 
TouchableOpacity 
} = React; 


module.exports = React.createClass({ 
render: function(){ 
var obj = this.props.initObj; 
return ( 
<View style={[styles.header, styles.row, styles.center]}> 
<TouchableOpacity style={[styles.row, styles.center]} onpress={this. pop}> 
<Icon/> 
<Text style={styles.fontFFF}>{o0bj.backName}</Text> 
</TouchableOpacity> 
<View style={[styles.title, styles.center]}> 
<Text style={[styles.fontFFF, styles.titlepos]} 
numberOfLines={1}>{0bj.title}</Text> 
</View> 
</View> 
); 
}, 


_pop: function(){ 
this.props.navigator.pop(); 


]); 
var styles = StyleSheet.create({ 
row:{ 
flexDirection:'row' 
}, 
header:{ 
height:50， 
backgroundColor: '#3497FF" 
}, 
fontFFF:{ 


color: '#fff", 
fontSize:17, 
fontweight: "bold 


titlepos:{ 
marginLeft:-20, 
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width:200 
]， 
center:{ 
justifyContent:'center', 
alignItems:'center’ 
} 
]) 


头 部 组 件 需要 传递 两 个 参数 一 一 backName 和 title， 其 中 backName 是 回 退 按钮 的 一 部 分 ( 即 回 
退 的 标题 ), title 是 该 页 面 的 标题 。 这 里 我 们 使 用 Touchable0pacity 包 庄 了 回 退 按钮 和 回 退 标题 。 
当 回 退 部 分 被 点 击 时 ， 绑 定 了 点 击 事件 ( 即 onPress={this. pop} )， 这 样 我 们 就 可 以 通过 
this.props.navigator.pop(); 回 退 到 前 一 个 页 面 。 


10.3.5 ”WebView 封装 


这 里 我 们 使 用 WebView 般 入 了 豆 办 的 WebApp 页 面 ， 同 时 会 将 该 页 面 作为 全 页 面 展 示 。 为 了 
更 好 地 控制 WebView 和 原生 App 之 间 的 跳 转 ， 我 们 将 WebView 统 一 包装 ， 提 供给 开发 者 头 部 和 全 
页 面 的 WebView。 我 们 希望 调用 封装 好 的 WebView 组 件 后 的 效果 如 图 10-5 所 示 。 


《电影 当 幸 福来 敲 门 


当 幸 福来 敲 门 The Pursuit of Happyness 


2008-01-17 上 映 
| “ 想 看 | 看 过 
影片 信息 与 简介 
图 片 (343) 
这 ll as 
加 6 月 


图 10-5 “WebView 效 果 


我 们 封装 的 WebView 组 件 的 代码 在 common/webview.js 文 件 中 ， 具 体 如 下 : 


Var React = require('react-native'); 
var Util = require('./util'); 
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var Header = require('./header'); 


var { 
WebView, 
View 
= React; 


module.exports = React.createClass({ 
render: function(){ 


}); 


return ( 
<View> 
<Header 
navigator={ 
initObj={{ 
backName: 


title: thi 


}}/> 
<WebView 
contentInse 


style={{wid 


this.props.navigator} 


this.props.backName, 
s.props.title 


t={{top: -40}} 
startInLoadi 
th: Util.size.width, height:Util.size.height -50}} 


ngState={true} 


url={this.props.url}></WebView> 


</View> 


好 


这 里 我 们 调用 了 工具 类 (common/utiljs ) 和 公共 头 组 件 ( common/headerjs )。 工 具 类 模块 主 


要 提供 


屏幕 大 小 ，size 属 性 用 于 计算 WebView 页 面 的 大 小 。 头 部 组 件 提 供 回 退 到 App 的 功能 。 在 


WebView 中 ， 我 们 使 用 了 contentInset 和 startInLoadingState 属 性 。contentInset 属 性 主要 用 于 
WebView 内 山 页 面 的 偏 移 ， 这 里 向 上 偏 移 410， 是 为 了 隐藏 豆 因 WebApp 的 头 部 ， 防 止 出 现 两 个 头 
部 ( 即 我 们 定义 的 公共 头 组 件 和 豆瓣 WebApp 头 部 )。 这 里 将 startInLoadingState 设 置 为 true, 这 
样 在 加 载 页 面 的 时 候 会 出 现 loading 效 果 ， 避 人 免 App 白 屏 ， 减 少 用 户 的 疑虑 。 


10.3.6 ”搜索 框 封装 
因为 搜索 框 在 三 个 列表 页 中 都 会 用 到 ,所 以 需要 开发 通用 的 搜索 框 组 件 。 但 是 , 我 们 也 不 希 


望 过 度 封装 ， 


这 样 就 削弱 了 开发 者 定制 的 能 力 。 这 里 仅仅 指定 搜索 框 的 高 度 、 边 框 颜色 、 边 框 线 


宽 等 ， 输 入 框 的 事件 全 部 交 由 调用 者 控制 。 搜 索 框 组 件 即 (common/search.js ) 的 代码 如 下 : 


Var React = require('react-native'); 

var Uti = require('./util'); 

var { 
StyleSheet, 
Text， 
View, 
TabBarIOS ， 
TextInput 
= React; 
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module.exports = React.createClass({ 
render: function(){ 
return ( 
<View style={styles.flex 1}> 
<TextInput style={[styles.flex 1, styles.input]} {...this.props}/> 
</View> 


); 


flex 1:{ 


input:{ 
borderWidth:Util.pixel, 
height:40, 
borderColor: '#DDDDDD', 
paddingLeft:5 
} 
]); 


这 里 我 们 使 用 了 {...this.props}, 这 样 调 用 者 在 调用 搜索 框 组 件 时 挂 载 的 属性 都 可 以 传递 给 


TextInput。 


10.4 功能 开发 


公共 组 件 已 经 开发 完成 ， 现 在 就 开始 开发 App 的 功能 了 。 因 为 图 书 的 功能 模块 相对 较 多 ， 所 
以 这 里 重点 介绍 一 下 。 而 电影 和 音乐 模块 的 详情 页 都 交 由 WebView 内 骨 豆 瓣 WebApp 了 ， 所 以 相 
对 简单 。 


10.4.1 ”入口 组 件 


“ 豆 搜 ”App 是 基于 React Native iOS 开 发 的 ， 所 以 index.iosjs 是 入 口 组 件 。 入 口 组 件 一 般 需要 
做 的 事情 是 : 初始 化 路 由 和 整个 App 布 局 。 我 们 在 人 口 组 件 中 使 用 了 TabBarIOS 组 件 和 封装 的 
Navigation 组 件 ， 这 样 TabBarIOS 可 以 用 于 不 同 功能 模块 的 切换 ，Navigation 可 以 作为 路 由 的 人 口 。 
入 口 组 件 的 代码 如 下 : 

var React = require('react-native'); 


var Navigation = require('./i0S views/common/navigation'); 
var Book = require('./i0S views/book/book list'); 


var Music = require('./i0S views/music/music'); 
var Movie = require('./i0S views/movie/movie'); 
var { 

AppRegistry, 
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StyleSheet, 
Text， 
View, 
TabBarI0S, 
ScrollView, 
StatusBarIOS 
} = React; 
StatusBarI0S.setHidden(true); 
var douApp = React.createClass({ 
getInitialState: function(){ 
return { 
selectedTab: ' 图 书 ' 
}; 
}, 
render: function() { 
return ( 
<TabBarIOS> 
<TabBarI0OS .Item 
title=" 图 书 " 
selected={this.state.selectedTab === ' 图 书 '} 
icon={require('image!book' )} 
onpress={() => { 
this.setState({ 
selectedTab: ' 图 书 ' 
]); 
}}> 
<Navigation component={Book}/> 
</TabBarI0S. Item> 


<TabBar10S. Item 
title=" 电 影 " 
selected={this.state.selectedTab === ' 电 影 '} 
icon={require('image!movie' )} 
onpress={() => { 
this.setState({ 
selectedTab: ' 电 影 ' 
})); 
}}> 
<Navigation component={Movie}/> 
</TabBar10S. Item> 


<TabBarIOS .Item 
title=" 音 乐 " 
selected={this.state.selectedTab === ' 音 乐 '} 
icon={require('image!music' )} 
onpress={() => { 
this.setState({ 
selectedTab: ' 音 乐 " 
]); 
}}> 
<Navigation component={Music}/> 
</TabBar10S. Item> 
</TabBarIOS> 


图 灵 社 区 会 员 蚂 蜂 (240671488@qq.com) 专 享 尊重 版 权 


356 区 第 10 章 豆 搜 App 


})); 


AppRegistry.registerComponent('douApp', () => douApp); 


在 上 述 代 码 中 ， 我 们 通过 StatusBarI05.setHidden(true); 隐藏 了 状态 栏 ， 同 时 使 用 
this.state.selectedTab 来 切换 选项 卡 。 这 里 ， 在 每 一 个 TabBarI0S.Item 中 都 使 用 了 Navigation 组 
件 。 所 以 ，Navigation 的 初始 路 由 都 会 在 TabBarI0S.Item 切 换 时 展现 。TabBarIOS 的 效果 如 图 10-6 
所 示 。 


图 10-6 ”TabBarIOS 效 果 


10.4.2 ”图 书 列表 页 开发 


图 书 列表 页 包含 两 部 分 , 一 个 是 搜索 功能 ， 另 一 个 是 列表 功能 。 但 是 搜索 功能 其 实 和 列表 功 
有 联系 的 ,因为 通过 关键 字 搜 索 出 来 的 结果 需要 在 列表 中 展示 。 因 此 , 我 们 需要 完成 的 第 一 
列表 项 组 件 ， 即 book/book_items.js。 


1. 列表 项 组 件 


因为 列表 项 组 件 同样 会 提供 给 图 书 详情 页 使 用 , 所 以 封装 列表 项 组 件 时 要 灵活 些 , 不 能 在 列 
表 项 组 件 内 部 绑 定 点 击 事件 ， 否 则 在 详情 页 就 会 出 现 循环 引用 的 问题 。 列 表 项 组 件 的 代码 如 下 : 


var React = require('react-native'); 
var Util = require('./../common/util'); 
var { 

StyleSheet, 

Text， 

View, 

ListView, 

Image, 

TouchableOpacity 
} = React; 


module.exports = React.createClass({ 
render: function(){ 
Var row = this.props.row; 
return 
<TouchableOpacity style={[styles.row, styles.item]} {...this.props}> 
<View style={[styles.center]}> 
<Image source={{uri: row.image}} style={styles.book img}/> 
</View> 
<View style={styles.content}> 
<View> 
<Text style={{width:200}} numberOfLines={1}>{row.title}</Text> 
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</View> 
<View style={{marginTop:10}}> 
<Text style={[styles.publisher, {width:200}]} 
numberOfLines={1}>{row.publisher}</Text> 
</View> 
<View style={{marginTop:10}}> 
<Text style={[styles.publisher, {width:200}]} 
numberOfLines={1}>{row.author}</Text> 
</View> 
<View style={[styles.row, {marginTop:10}]}> 
<Text style={styles.price}>{row.price}</Text> 
<Text style={styles.pages}>{row.pages} 页 </Text> 


</View> 
</View> 
</TouchableOpacity> 
); 
} 
]); 
var styles = StyleSheet.create({ 
row:{ 
flexDirection:'row' 
}, 
item:{ 


height:120, 
borderTopWidth:Util.pixel, 
borderBottomWidth:Util.pixel, 
marginTop:5, 
marginBottom:5, 
borderColor: #CCC 
}， 
book img:{ 
width:80， 
height:100， 
resizeMode:Image.resizeMode.contain 
}， 
center:{ 
justifyContent:'center', 
alignItems:'center’' 
}， 
content:{ 
marginTop:10, 
marginLeft:10 
}， 
publisher:{ 
color: '#A3A3A3' 
fontSize:13 
}， 
price:{ 
color: '#2BB2A3°' ， 
fontSize:16 
}， 
pages:{ 
marginLeft:10, 
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color: '#A7AOAO 
} 
]); 
列表 项 组 件 主要 负责 泻 染 图 书 的 简要 信息 ， 比 如 图 书 的 图 片 、 书 名 、 出 版 社 、 作 者 、 价 格 和 
页 码 。 这 里 也 使 用 了 {...this.props}， 这 样 调用 者 就 可 以 自己 决定 是 否 需要 点 击 事件 。 列 表 项 组 
件 完成 的 效果 如 图 10-7 所 示 。 


| 深入 浅 出 Node.js 


图 10-7 ”列表 项 组 件 


2. 搜索 和 列表 开发 


开发 完了 列表 项 组 件 ， 开发 列表 就 是 水 到 渠 成 的 事 了 。 我 们 希望 列表 页 的 涉 部 是 搜索 框 , 搜 
索 框 下 面 是 列表 。 列 表 组 件 ( 即 book/book_list.js ) 的 代码 如 下 : 


var React = require('react-native'); 

var Search = require('./../common/search’'); 

var Util = require('./../common/util'); 

var ServiceURL = require('./../common/service'); 
var BookItem = require('./book item'); 

var BookDetail = require('./book detail'); 


var { 
StyleSheet, 
Text， 
View, 
ListView, 
Image, 
ScrollView, 
ActivityIndicatorIOS， 
TouchableOpacity 

} = React; 


module.exports = React.createClass({ 
getInitialState: function() { 
var ds = new ListView.DataSource({rowHasChanged: (r1, 72) => r1 !== r2}); 
return { 
dataSource: ds.cloneWithRows([]), 
keywords: 'c 语 言 '， 
show: false 


}; 

}, 

render: function(){ 
return( 


<ScrollView style={styles.flex 1}> 


<View style={[styles.search, styles.row]}> 
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<View style={styles.flex 1}> 

<Search placeholder=" 请 输入 图 书 的 名 称 " onChangeText={this._changeText}/> 
</View> 
<TouchableOpacity style={styles.btn} onpress={this. search}> 

<Text style={styles.fontFFF}> 搜 索 </Text> 


</TouchableOpacity> 
</View> 
{ 
this.state. show ? 
<ListView 
dataSource={this. state.dataSource} 
renderRow={this. renderRow} 
/> 
: Util.loading 
} 


</ScrollView> 
); 
}, 
componentDidMount: function(){ 
this.getData(); 
// 认 当 图 书 列表 项 
_renderRow: function(row){ 
return ( 
<BookItem row={row} onpress={this. loadPage.bind(this, row.id)}/> 
); 
}, 
_changeText: function(val){ 
this.setState({ 
keywords: val 
]); 
}, 
_search: function(){ 
this.getData(); 


}, 
// 根 据 关 键 字 查询 
getData: function(){ 
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 


var that = this; 
var baseURL = ServiceURL .book search + '?count=10&q="' + this.state.keywords; 
// 开 启 loading 
this.setState({ 
show: false 
}); 
Util.get(baseURL, function(data){ 
if(!data.books || !data.books.length){ 
return alert(' 图 书 服务 出 错 '); 
} 
var books = data.books; 
that. setState({ 
dataSource: ds.cloneWithRows(books), 
show: true 
}); 
}, function(err){ 
alert(err); 
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]); 
)， 
_1oadPage: function(id){ 
this.props.navigator.push({ 
component: BookDetail, 
passProps:{ 
id: id 


var styles = StyleSheet.create({ 
flex 1:{ 
flex:1, 
marginTop:5 
外 
search:{ 
paddingLeft:5, 
paddingRight:5， 
height:45 


backgroundColor: '#0091FF ， 


JjustifyContent: center ， 
alignItems: centeT' 

}, 

fontFFF:{ 
color: '#fff" 

外 

row:{ 
flexDirection:'row' 

} 

]) 


在 上 述 代 码 中 ， 我 们 在 getInitialState 方 法 中 返回 了 dataSource 、keywords 和 show 属 性 ， 其 


中 dataSource 是 演 染 列表 的 数据 源 ，keywords 表 示 搜 索 的 关键 字 ，show 表 示 是 否 


显示 列表 。 


在 render 方 法 中 , 我 们 将 搜索 功能 包 于 在 View 中 ， 并且 为 Search 组 件 绑 定 onChangeText 事 件 ， 
也 为 “搜索 ”按钮 绑 定 了 onpress 事 件 。this.state.show 控 制 是 显示 列表 还 是 显示 loading 。 在 


ListView 组 件 中 ，dataSource 是 ListView 组 件 的 数据 源 ，renderRow 方 法 月 


即 泻 染 book/book items.js 组 件 。 


于 泻 染 列表 的 每 一 项 ， 


在 componentDidMount 中 , 我 们 调用 了 getData 方 法 。getData 方 法 的 作用 是 请 求 图 书 搜索 服务 ， 


然后 将 获取 的 数据 设置 到 dataSource 并 1 


this. search 调 用 的 也 是 getData 方 法 ， 以 便 更 新 数据 源 。 
在 renderRow 方 法 中 ， 我 们 泻 染 了 BookItem 组 件 ， 并 且 绑 定 了 点 击 事件 ， 传 递 图 书 的 id。 

_1oadPage 是 根据 图 书 id 加 载 图 书 的 详情 页 。 这 里 之 所 以 能 够 使 用 this.props.navigator.push 传 递 

passProps 属 性 , 是 因为 10.3.3 节 做 了 Navigator 的 封装 ， 即 挂 载 了 route 的 passProps 
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页 开发 完成 的 效果 如 图 10-8 所 示 。 


| Node 
USD 34.99 


Le vocsbulaire de saint Tho 
日 if 1srketin 

M 
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Node.London Reader | 


| 深入 浅 出 Noda.js 


CNY 69.00 


苞 恒 Node.js 开 发 指南 
E 中 [| 月 


本 3 


图 10-8 ”图 书 列表 页 


10.4.3 图 书 详情 页 开发 


现在 , 我 们 需要 开发 图 书 的 详情 页 ， 即 book/book_detailjs 模 块 。 在 详情 页 ， 需要 做 的 就 是 拼 
装 头 部 组 件 和 列表 项 组 件 ， 添 加 图 书简 介 和 作者 简介 ， 具体 代码 如 下 : 


Var React = require('react-native'); 

var Uti = require('./../common/util'); 

var ServiceURL = require('./../common/service'); 
var BookItem = require('./book item'); 

var Header = require('./../common/header'); 


var { 
StyleSheet, 
Text， 
View, 
ListView, 
Image, 
ScrollView, 
TouchableOpacity 
} = React; 


module.exports = React.createClass({ 
getInitialState: function(){ 
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return{ 
data: null 
}; 
}, 
render: function(){ 
return( 
<ScrollView style={styles.m10}> 
{ 
this.state.data ? 
<View> 
<Header 
navigator={this.props.navigator} 
initObj={{ 
backName: ' 图 书 '， 
title: this.state.data.title 
}}/> 
<BookItem row={this.state.data}/> 
<View> 
Text style={[styles.title]}> 图 书简 介 </Text> 
Text style={styles.text}>{this. state.data. summary}</Text> 
</View> 


入 


入 


<View> 
Text style={[styles.title]}> 作 者 简介 </Text> 
Text style={styles.text}>{this. state.data.author intro}</Text> 
</View> 
<View style={{height:50}}></View> 
</View> 
: Util.loading 


入 入 


} 


</ScrollView> 


了》 


外 


componentDidMount: function(){ 
var id = this.props.id; 
var that = this; 
var Url = ServiceURL.book search id + /” + id; 
Util.get(url, function(data){ 

that.setState({ 

data: data 

]); 
}, function(err){ 
alert(err); 


]); 


var styles = StyleSheet.create({ 
m10:{ 


title:{ 
fontSize:16, 
marginLeft:10, 
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marginTop:10, 
marginBottom:10 

}， 

text:{ 
marginLeft:10, 
marginRight:10, 
color: '#000D22" 

} 

}); 


这 里 我 们 使 用 了 Header 组 件 , 用 于 回 退 和 标题 的 显示 。 同 时 加 载 了 BookItem 组 件 来 显示 图 书 
的 基本 信息 。 同 时 ，this.state.data.summary 和 this.state.data.author_intro 分 别 用 于 显示 图 
书简 介 和 作者 信息 。 我 们 在 componentDidMount 中 请 求 了 图 书 详情 服务 ， 即 var url = ServiceURL. 
book_search id + '/' + id;， 然 后 将 数据 传递 给 state 来 演 染 详情 页 视图 。 图 书 详情 页 的 效果 如 
图 10-9 所 示 。 


信 图 书 深入 浅 出 Node.js 
LL 深入 浅 出 Nodejs 
人 + | 


CNY 69.00 332 


图 书简 介 


本 书 从 不 同 的 视角 刘 绍 了 Node 内 在 的 符 点 和 结构 。 由 首 
章 Node 介绍 为 索引 ， 涉 及 Node 世 各 个 方面 ， 主 要 内 容 

包含 模块 机 制 的 捐 示 、 异 步 WO 实现 原理 的 展现 、 异 步 编 
程 的 探讨 、 内 存 控制 的 介绍 、 二 进 钙 数据 Buffer 的 细节 、 

Node 和 中 的 网 络 编程 茶 础 、Node 中 世 Web 开发 、 讲 程 间 
的 消息 传递 、Node 测试 以 及 通过 Node 构建 产品 需要 的 

注意 事项 。 最 后 的 附录 刘 绍 了 Node 的 安装 、 调 试 、 编 码 
规范 和 NPM 仓库 等 事宜 

本 书 运 台 想 深入 了 解 Node 的 人 员 阅 读 ， 


作者 简介 


朴 灵 

真名 团 永 强 ， 义 艺 型 码 农 ， 就 职 于 阿里 巴巴 数据 平台 ， 资 
深 工程 师 ，Node,js 布 道 者 ， 写 了 多 篇 文章 介绍 Nodejs 的 
纲 节 。 污 跃 于 CNoce 寺 区 ， 录 浅 下 会 议 NodeParty 的 组 织 
者 和 JSConf China ( 沪 JS 和 京 JS) 的 组 织 者 之 一 。 热 爱 
于 源 ， 多 个 Node.js 模 块 的 作者 。 个 人 GitHub 地 址 : 
http://github.cory/JacksonTian。 即 首 问 路 ， 玛 楚 为 年。 


加 了 EE| 


图 10-9 ”图书 详情 页 


10.4.4 ”电影 模块 开发 


开发 完 图 书 模块 ， 电 影 模 块 的 开发 就 要 简单 很 多 。 同 样 ， 电 影 模块 分 为 搜索 、 列 表 和 详情 页 
这 3 个 功能 。 但 是 电影 的 详情 页 是 WebView 内 骨 豆 注 WebApp 来 实现 的 。 电 影 模块 的 实现 放 在 
movie/movie.js 文 件 中 ， 其 内 容 如 下 : 


var React = require('react-native'); 
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var Search = Tequire('"./../common/search ); 

var Util = require('./../common/util'); 

var ServiceURL = require('./../common/service'); 
Var webView = require('./../common/webview' ); 


var { 
StyleSheet, 
Text， 
View, 
ListView, 
Image, 
ScrollView, 
ActivityIndicatorIO9S， 
TouchableOpacity 

} = React; 


module.exports = React.createClass({ 
getInitialState: function() { 
var ds = new ListView.DataSource({rowHasChanged: (r1, 72) => r1 !== r2}); 
return { 
dataSource: ds.cloneWithRows([]), 
keywords: ' 幸 福 '， 


show: false 
}; 
外 
render: function(){ 
return( 
<ScrollView style={styles.flex 1}> 
<View style={[styles.search, styles.row]}> 
<View style={styles.flex 1}> 
<Search placeholder=" 请 输入 电影 名 称 "”onChangeText={this._changeText}/> 
</View> 
<TouchableOpacity style={styles.btn} onpress={this. search}> 
<Text style={styles.fontFFF}> 搜 索 </Text> 
</TouchableOpacity> 
</View> 
{ 
this.state.show ? 
<ListView 
dataSource={this.state.dataSource} 
renderRow={this. renderRow} 
/> 
: Util.loading 
} 
</ScrollView> 
); 
外 


componentDidMount: function(){ 
this. getData(); 


}, 


_changeText: function(val){ 
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this.setState({ 
keywords: val 
}); 
}， 


_search: function(){ 
this. getData(); 


}, 


_renderRow: function(row){ 
Var casts = row.casts; 
var names = []; 
for(var i in casts){ 
names.push(casts[i].name); 


} 


return 
<View style={[styles.row, styles.item]}> 
<View> 
Image style={styles.img} source={{uri: row.images.medium}}/> 
</View> 
<View> 
<Text st 
名 称 : 


八 


e={styles.textWitdh} numberOfLines={1}> 
row.title} 


rive 


<Text style={styles.textWitdh} numberOfLines={1}> 
: {names} 


<Text style={styles.textWitdh} numberOfLines={1}> 
{row.rating.average} 


<Text style={styles.textWitdh} numberOfLines={1}> 
{ 


<Text style={styles.textWitdh} numberOfLines={1}> 
标签 : {row.genres} 
</Text> 
<TouchableOpacity style={styles.goDou} 

onpress={this. goDouBan.bind(this, row.title, row.alt)}> 

x<Text> 详 情 </Text> 

</TouchableOpacity> 
</View> 
</View> 

); 

}, 


_getData: function(){ 
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
var that = this; 
var baseURL = ServiceURL .movie search + '?count=108&q=" + this.state.keywords; 
this.setState({ 
show: false 
}); 
Util.get(baseURL, function(data){ 
if(!data.subjects || !data.subjects.length){ 
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return alert(' 电 影 服务 出 错 '); 
} 
var subjects = data.subjects; 
that.setState({ 
dataSource: ds.cloneWithRows(subjects), 
show: true 
]); 
}, function(err){ 
alert(err); 
)); 
)， 


_goDouBan: function(title, url){ 
this.props.navigator.push({ 
component: webView, 
passProps:{ 
backName: “电影 ， 
title: title, 


Urb: “Url 
} 
]); 
} 
]) 
var styles = StyleSheet.create({ 
flex 1:{ 
flex:1, 


marginTop:5 
search:{ 

paddingLeft:5, 

paddingRight:5， 


height:45 
}， 
btn:{ 
width:50, 


backgroundColor: '#0091FF ， 
JjustifyContent: ' center ， 
alignItems: centeT' 

]， 

fontFFF:{ 
color: '#fff" 


1 


flexDirection: Tow 


height:110, 
resizeMode: Image.resizeMode.contain 


}, 
textWitdh:{ 
width:200, 
marginLeft:10 
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】， 

item:{ 
marginTop:10, 
height:140, 
paddingTop:15， 
paddingLeft:10， 
borderBottomWidth:Util.pixel, 
borderTopWidth:Util.pixel, 
borderColor: "#ddd" 

}， 

goDou:{ 
justifyContent:'center’, 
alignItems:'center', 
height:32， 
width:60， 
borderWidth:Util.pixel, 
borderColor: '#3C9BFD ' ， 
marginLeft:30, 
marginTop:10, 
borderRadius:3 

} 

}); 


同样 ,我 们 在 电影 的 列表 页 中 使 用 了 公共 的 搜索 框 组 件 ,调用 _getData 方 法 将 获取 的 电影 信 
息 展示 在 列表 中 。ListView 组 件 的 renderRow 方 法 用 于 演 染 列表 的 每 一 项 。Text 组 件 的 
number0fLines 属 性 表示 显示 多 少 行 ， 如 果 给 定 了 Text 组 件 的 宽度 ， 那 么 多 余 的 文本 将 以 省 略 号 ..… 
表示 。 列 表 页 完成 的 效果 如 图 10-10 所 示 。 


名 称 : 幸福 
4 演员 : 林 秀 品 黄 政 民 
内 : 13 


时 间 : 2007 
标签 : 剧情 爱情 


详情 


国名 各 : 幸福 
后 演员 : 让 - 克 劳 德 德 曾 奥 Clair.., 
四 评分: 8.1 
两 时 间 : 1965 
标签: 剧情 
详情 


We 名 称 : 幸福 
NES 演员; 
和 评分 : 8.3 
国 时 间 : 2014 
标签 : 纪录 片 


详情 


名 称 : 当 幸 福来 鼓 门 
l 演员 ; 威 尔 ' 史 密斯 贾 登 史 密 … 
评分 : 8.9 
时 间 : 2006 
标签 : 剧情 传记 家 庭 


| [= 中 


10-10 ”电影 列表 页 


图 灵 社 区 会 员 蚂 蜂 (240671488@qq.com) 专 享 尊重 版 权 


368 区 第 10 章 豆 搜 App 


这 里 同样 需要 详情 页 ， 我 们 在 “详情 ”按钮 上 绑 定 了 onPress 事 件 ， 即 this._goDouBan. 
bind(this, row.title, row.alt)。 在 goDouBan 方 法 中 ， 我 们 将 路 由 导向 了 封装 的 WebView 组 件 ， 
并 且 传 递 了 回 退 按钮 中 的 文字 、 头 部 的 标题 以 及 打开 页 面 的 标题 。 详 情 页 的 效果 如 图 10-11 所 示 。 


《电影 功夫 熊猫 ， 盖 世 传奇 第 … 


功 大 熊猫 : 盖世 传奇 第 一 季 Kung Fu Panda: 
Legends of Awesomeness Season 1 
妇女 友 女 7.6 2237 人 评价 
Lane Lueras( 导 澳 ) / Luther McLaurin( 导 滨 ) /Juan Jose 
Meza-Leon( 忌 闹 ) / Mike Mullen( 寺 敲 ) /Jim 
Schumann( 导 演 ) /Gabe Swarr{ 导 演 ) / Tim Dadabo / 
Mick Wingert / Frad Tatasciore 
类 型 : 喜剧 / 动作 / 动画 
2011-09-19 首 播 


[下 逢 || 在 和 || 者 过 


功夫 熊 狂 : 盖世 传奇 第 一 季 的 分 集 


5 集 6 集 7 集 8 集 


图 10-11 电影 详情 页 


10.4.5 ”音乐 模块 开发 


电影 模块 和 音乐 模块 ( music/musicjs ) 十 分 类 似 ， 除 了 列表 项 的 泻 染 外 。 音 乐 模块 的 代码 
如 下 : 


var React = require('react-native'); 

var Search = require('./../common/search'); 

var Util = require('./../common/util'); 

var ServiceURL = require('./../common/service'); 
Var webView = require('./../common/webview' ); 


var { 
StyleSheet, 
Text， 
View, 
ListView, 
Image, 
ScrollView, 
ActivityIndicatorIO9， 
TouchableOpacity 
} = React; 
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module.exports = React.createClass({ 
getInitialState: function() { 
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
return { 
dataSource: ds.cloneWithRows([]), 
keywords: “偏偏 喜欢 你 ， 


show: false 
}; 
}, 
render: function(){ 
return( 
<ScrollView style={styles.flex 1}> 
<View style={[styles.search, styles.row]}> 
<View style={styles.flex 1}> 
<Search placeholder=" 请 输入 歌曲 /歌手 名 称 " onChangeText={this._changeText}/> 
</View> 
<TouchableOpacity style={styles.btn} onpress={this. search}> 
<Text style={styles.fontFFF}> 搜 索 </Text> 
</TouchableOpacity> 
</View> 
this.state. show ? 
<ListView 
dataSource={this. state.dataSource} 
renderRow={this. renderRow} 
/> 
: Util.1loading 
J 
</ScrollView> 
); 
}, 


componentDidMount: function(){ 
this. getData(); 
}, 


_changeText: function(val){ 
this.setState({ 

keywords: val 

]); 

}, 


_search: function(){ 
this. getData( ); 


了》 


_renderRow: function(row){ 
return ( 
<View style={styles.item}> 

<View style={styles.center}> 
<Image style={styles.img} source={{uri: row.image}}/> 

</View> 

<View style={[styles.row]}> 
<Text style={[styles.flex 1,{marginLeft:20}]} 


图 灵 社 区 会 员 蚂 蜂 (240671488@qq.com) 专 享 尊重 版 权 


370 区 第 10 章 豆 搜 App 


numberOfLines={1}> 曲 目 : {row.title}</Text> 


<Text style={[styles.textwidth]} numberOfLines={1}> 演 喝 : {row.author}</Text> 
</View> 


<View style={[styles.row]}> 


<Text style={[styles.flex 1, {marginLeft:20}]} 
number0fLines={1}> 时 间 : {row.attrs['pubdate' ]}</Text> 
<Text style={styles.textWidth} numberOfLines={1}> 评 分 : 
{row[ 
</View> 


rating' ]['average' ]}</Text> 


<View style={[styles.center]}> 


<TouchableOpacity style={[styles.goDou, styles.center]} 
onpress={this. goDouBan.bind(this, row.title, row.mobile link)}> 
x<Text> 详 情 </Text> 

</TouchableOpacity> 


</View> 


</View> 
); 
13 


_getData: function(){ 


Var ds = 
var that 


new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
= this; 


Var baseURL = ServiceURL.music search + '?count=10&q=' + this.state.keywords; 


this.setState({ 
show: false 


}); 
Util.get( 


} 


Var mus 


if(!ldata.musics 
return alert(' 音 乐 服务 出 错 '); 


baseURL, function(data){ 
ldata.musics.1length){ 


ics = data.musics; 


that.setState({ 


dataSource: ds.cloneWithRows (musics), 


show: 


}); 


true 


}, function(err){ 


]); 
外 


_goDouBan : 


alert(err); 


function(title, url){ 


this.props.navigator.push({ 
component: webView, 
passProps:{ 
title: title, 


url: 


url, 


packName: “音乐 


var styles = 
flex 1:{ 
flex:1, 


StyleSheet.create({ 


marginTop:5 
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search:{ 
paddingLeft:5, 
paddingRight:5, 
height:45 


2 
btn:{ 
width:50, 
backgroundColor: '#O0091FF ， 
justifyContent: center ， 
alignItems: CenteT' 


fontFFF:{ 
color: '#fff" 


row:{ 
flexDirection:'row' 


height:70， 
borderRadius:35 


center:{ 
justifyContent:'center', 
alignItems:'center' 


item:{ 
marginTop:10, 
borderTopWidth:Util.pixel, 
borderBottomWidth:Util.pixel, 
borderColor: '#ddd ， 
paddingTop:10， 
paddingBottom:10 


textWidth:{ 
width:120 


goDou:{ 
height:35, 
width:60, 
borderWidth:Util.pixel, 
borderColor: '#3082FF ， 
borderRadius:3 


} 
}); 


这 里 我 们 同样 使 用 了 搜索 组 件 和 WebView 组 件 。 在 _renderRow 方 法 中 ， 我 们 泻 染 了 音乐 的 名 
称 、 歌 手 、 出 版 时 间 、 评 分 等 。 列 表 的 效果 如 图 10-12 所 示 。 

在 goDouBan 方 法 中 , 我 们 将 封装 的 WebView 组 件 推送 进 路 由 。 该 WebView 内 岗 的 是 音乐 的 详 
情 页 ， 具体 效 果 如 图 10-13 所 示 。 
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《音乐 偏偏 喜欢 你 (LPCD45 咱 


偏偏 喜欢 你 (LPCD45 1l) 


8.5 35 


网 演唱 : 陈百强 
中 pnts A 陈百强 / 流行 /2012 
详情 
华纳 陈百强 偏偏 喜欢 你 LPCD45 ll 
模拟 音色 更 加 出 色 原 汁 原味 回味 无 穷 
A LPCD45 1/ LPCD M2 Mastering / An... (展开 ) 
曲目 : 偏偏 喜欢 你 LPCD45 上 演唱 ; 陈百强 
时 间 : 2012 HA 85 
详情 
01. 偏偏 喜欢 你 
02. 相思 河畔 
03. 脉搏 奔流 
日 04. 令 我 倾心 只 有 你 
曲目 :偏偏 喜欢 你 演唱 ; 陈百强 05 浪潮 (展开 ) 
时 间 : 2010-12-21 HA 39 
详情 
2 村 三 
A 偏偏 喜欢 你 
:| 用 | EE 
图 10-12 ”音乐 列表 图 10-13 ”音乐 详情 页 


10.5 ”完成 豆 搜 App 
至 此 ， 豆 搜 App 的 开发 已 经 完成 。 


组 件 化 的 开发 思想 。 本 章 是 全 书 的 最 后 
有 趣 的 React Native App 了。 伙伴 们 ， 一 起 努力 


TT 
ne 


a 


虽然 这 是 一 个 简单 的 App， 但 是 很 好 地 体现 了 React Native 


时， 


终结 篇 。 学 习 到 此 ， 应 该 可 以 给 自己 开发 一 款 
前 行 吧 ， 加 油 ! 
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欢迎 加 入 


图 灵 社 区 ITuring.cn 


最 前 沿 的 上 T 类 电子 书 发 售 平台 


电子 出 版 的 时 代 已 经 来 临 。 在 许多 出 版 界 同 行 还 在 犹豫 稍 律 的 时 候 ， 图 灵 社 区 已 经 采取 实际 行 
动 拥抱 这 个 出 版 业 巨 变 。 作 为 国内 第 一 家 发 售 电子 图 书 的 IT 类 出 版 商 ， 图 灵 社 区 目前 为 读者 提供 两 种 
DRM-free 的 阅读 体验 : 在 线 阅 读 和 PDF。 

相 比 纸 质 书 ， 电 子 书 具有 许多 明显 的 优势 。 它 不 仅 发 布 快 ， 更 新 容易 ， 而 且 尽 可 能 采用 了 彩色 图 
片 《 即 使 有 的 书 纸 质 版 是 黑白 印刷 的 ) 。 读 者 还 可 以 方便 地 进行 搜索 、 剪 贴 、 复 制 和 打印 。 

图 灵 社 区 进一步 把 传统 出 版 流程 与 电子 书 出 版 业务 紧密 结合 ， 目 前 已 实现 作 译 者 网 上 交 稿 、 编 辑 
网 上 审 稿 、 按 章 发 布 的 电子 出 版 模式 。 这 种 新 的 出 版 模式 ， 我 们 称 之 为 “敏捷 出 版 ”， 它 可 以 让 读者 
以 较 快 的 速度 了 解 到 国外 最 新 技术 图 书 的 内 容 ， 弥 补 以 往 翻译 版 技术 书 “ 出 版 即 过 时 ”的 缺 钴 。 同 
时 ， 敏 捷 出 版 使 得 作 、 译 、 编 、 读 的 交流 更 为 方便 ， 可 以 提前 消灭 书稿 中 的 错误 ， 最 大 程度 地 保证 图 
书 出 版 的 质量 。 


优惠 提示 : 现在 购买 电子 书 ， 读 者 将 获 赠 书 款 20% 的 社区 银子 ， 可 用 于 兑换 纸 质 样 书 。 


最 方便 的 开放 出 版 平台 


图 灵 社 区 向 读者 开放 在 线 写 作 功 能 ， 协 助 你 实现 自 出 版 和 开源 出 版 的 梦想 。 利 用 “合集 ”功能 ， 
你 就 能 联合 二 三 好 友 共 同 创作 一 部 技术 参考 书 ， 以 免费 或 收费 的 形式 提供 给 读者 。( 收费 形式 须 经 过 
图 灵 社 区 立项 评审 。 ) 这 极 大 地 降低 了 出 版 的 门槛 。 只 要 你 有 写作 的 意愿 ， 图 灵 社 区 就 能 带 助 你 实现 
这 个 梦想 。 成 熟 的 书稿 ， 有 机 会 入 选 出 版 计划 ， 同 时 出 版 纸 质 书 。 

图 灵 社 区 引进 出 版 的 外 文 图 书 ， 都 将 在 立项 后 马上 在 社区 公布 。 如 果 你 有 意 翻 译 哪 本 图 书 ， 欢 迎 
你 来 社区 申请 。 只 要 你 通过 试 译 的 考验 ， 即 可 签约 成 为 图 灵 的 译 者 。 当 然 ， 要 想 成 功 地 完成 一 本 书 的 
翻译 工作 ， 是 需要 有 坚强 的 新力 的 。 


一 一 最 直接 的 读者 交流 平台 


在 图 灵 社 区 ， 你 可 以 十 分 方便 地 写作 文章 、 提 交 勘 误 、 发 表 评 论 ， 以 各 种 方式 与 作 译 者 、 编 辑 人 
员 和 其 他 读者 进行 交流 互动 。 提 交 勘 误 还 能 够 获 赠 社区 银子 。 
你 可 以 积极 参与 社区 经 常 开 展 的 访谈 、 乐 译 、 评 选 等 多 种 活动 ， 遍 取 积 分 和 银子 ， 积 累 个 人 声望 。 
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关注 图 灵 教 育 关注 图 灵 社 区 
iTuring.cn 


在 线 出 版 电子 书 《 码 农 》 杂 志 图 灵 访 谈 …… 


全 


一 一 一 一 QQ 联系 我 们 一 一 一 一 


图 灵 读 者 官方 群 |: 218139230 
图 灵 读 者 官方 群 ||: 164939616 


人 


一 一 一 一 微 博 联系 我 们 一 一 一 一 


官方 账号 ，@ 图 灵 教 育 @ 图 灵 社 区 @ 图 灵 新 知 
市 场合 作 : @ 图 灵 责 野 

写作 本 版 书 : @ 图 灵 小 花 @ 图 灵 张 起 

翻译 英文 书 ，@ 和 朱峰 ituring @ 楼 伟 珊 
翻译 日 文书 或 文章 : @ 图 灵 乐 声 

翻译 韩文 书 ，@ 图 灵 陈 噬 

电子 书 合作 ，@hi_jeanne 

图 灵 访 谈 /《 码 农 》 杂 志 : @ 李 有 盼 ituring 

加 入 我 们 : @ 王 子 是 好 人 


% 


一 一 一 一 微 信 联 系 我 们 一 一 一 一 


图 灵 教 育 图 灵 访 谈 


turingbooks ituring_interview 
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React Native 的 诞生 很 好 地 诠释 了 “ 鉴 往 知 来 ”。Facebook 采 用 全 新 的 设计 理念 ， 为 App 开 发 开辟 了 
React Native 这 一 新 途径 。 现 在 ， 作 者 们 将 这 门 新 技术 带 给 了 中 国 的 开发 人 员 。 


一 一 Eric Ye ( 携程 旅行 网 CTO ) 


如 果 说 现在 是 互联 网 的 天 下 ， 我 猜 将 来 还 会 是 互联 网 的 天 下 。Native App、HTML5、Hybrid 等 移动 技术 都 
将 成 为 过 往 云烟 ， 有 互联 网 思维 的 移动 技术 ( 如 React Native ) 将 会 大 展 身手 。 


一 一 吴 其 敏 〈 携程 旅行 网 框架 部 负责 人 ， 高 级 研发 总 监 ) 


React Native 是 一 项 非常 棒 的 技术 ， 它 独特 的 思路 帮助 我 们 找到 了 一 个 性 能 和 可 维护 性 的 绝 佳 平衡 点 。 
Facebook 投 入 了 大 量 资源 在 React Native 的 发 展 上 ， 我 们 已 经 看 到 很 多 知名 App 中 都 使 用 了 这 项 技术 。 它 同时 
拥有 Native App 的 性 能 和 Hybrid App 的 可 维护 性 ， 受 到 开发 人 员 热 捧 。 

本 书 作 者 花费 大 量 时 间 研 究 React Native 对 于 企业 App 的 价值 ， 书 中 的 内 容 对 于 有 一 些 前 端 基 础 的 同学 应 该 
很 容易 理解 。 希 望 这 本 书 能 帮助 降低 App 开 发 的 门槛 ， 我 们 也 希望 能 和 大 家 多 多 交流 经 验 。 

一 一 储 诚 栋 ( 携程 旅行 网 前 端 框架 研发 总 监 ) 

移动 技术 发 展 飞 速 ，Native 与 HTML5 的 竞争 也 由 来 已 久 。 从 PhoneGap 开 始 ， 大 家 一 直 在 寻找 Hybrid 的 方 
式 来 实现 App 快 速 开发 ， 同 时 设法 保持 良好 的 用 户 体验 。 

2015 年 Facebook 推 出 的 React Native 是 革命 性 的 技术 框架 ， 突 破 了 Native 与 HTML5 的 界限 ， 将 近乎 
Native 的 流畅 体验 和 JavaScript 的 开发 效率 完美 结合 。 

携程 框架 团队 第 一 时 间 采 用 这 项 技术 并 应 用 到 线 上 App 开 发 中 ， 其 中 的 实践 经 验 无 疑 值得 国内 移动 开发 者 借 
鉴 ， 推 荐 大 家 阅读 这 本 书 ， 一 起 追求 新 技术 的 价值 。 


一 一 陈 浩 然 〈 携程 旅行 网 无 线 研 发 总 监 ) 
React Native 是 React.js 的 胜利 ， 也 是 JavaScript 以 及 优秀 Web 开 发 体验 的 胜利 ， 更 是 技术 大 融合 的 胜利 。 


我 相信 作者 在 React Native 方 面 的 经 验 和 心得 都 浓缩 在 这 本 书 里 ， 而 且 能 够 第 一 时 间 看 到 一 本 React Native 中 文 
书 ， 感 觉 是 如 此 的 亲切 。 推 荐 大 家 细 细 阅读 ， 认 真实 践 。 


一 一 赵 锦江 ( 义 股 ) 〈 阿里 技术 专家 ) 
React Native 的 设计 目标 是 既 具 有 Web 的 开发 体验 和 发 布 能 力 ， 又 具备 Native 的 人 机 交互 体验 ， 它 在 行业 里 


掀起 了 一 股 Native 和 Web 融 合 探索 的 热潮 。 本 书 涉及 话题 较 全 面 ， 既 介绍 了 作为 基础 的 React、 组 件 、API， 又 
涉及 更 深入 的 组 件 扩展 和 封装 ， 最 后 三 章 的 真实 案例 定 能 让 读者 受益 菲 浅 。 


一 一 徐 凯 ( 鬼 道 )( 阿里 技术 专家 ) 


图 灵 社区 : iTuring.cn | | | 
热线 (010) 51095186 转 600 9 zsg7115141191 伸 > 


计算 机 / 移动 开发 / React Native ISBN 978-7-115-41191-4 


人 民 邮 电 出 版 社 网 址 : www.ptpress.com.cn 定价 : 79.00 元 


看 完了 


如 果 您 对 本 书 内 容 有 疑问 ， 可 发 邮件 至 contact@turingbook.com， 会 有 编辑 或 作 
译 者 协助 答疑 。 也 可 访问 图 灵 社 区 ， 参 与 本 书 讨论 。 


如 果 是 有 关 电 子 书 的 建议 或 问题 ， 请 联系 专用 客服 邮箱 : 


ebook@turingbook.com。 
在 这 可 以 找到 我 们 : 


微 博 @ 图 灵 教育 : 好 书 、 活 动 每 日 播报 

微 博 @ 图 灵 社 区 : 电子 书 和 好 文章 的 消息 

微 博 @ 图 灵 新 知 : 图 灵 教 育 的 科普 小 组 

微 信 图 灵 访 谈 : ituring_interview， 讲 述 码 农 精彩 人 生 
微 信 图 灵 教 育 : turingbooks 


图 灵 社 区 会 员 蚂 蜂 (240671488@qq.com) 专 享 尊重 版 权 


